- Tokens/Users tables:
- Replaced status Switch with explicit Enable/Disable buttons in the operation column
- Unified button styles with Channels/Models (Disable: danger + small; Enable: default + small)
- Status column now shows a small Tag only; standardized labels (Enabled/Disabled/etc.); removed usage info
- New "Remaining/Total Quota" column:
- Wrapped in a white Tag; shows Remaining/Total with a progress bar
- Replaced Tooltip with Popover; contents use Typography.Paragraph with copyable values
- Copyable content excludes percentages (only numeric quota values are copied)
- Added padding to Popover content for better readability
- Tokens specifics:
- For unlimited quota, show a white Tag "Unlimited quota" with a Popover that displays copyable "Used quota"
- Cleanup:
- Removed Switch imports/handlers and unused code paths
- Eliminated console logs and redundant flags; simplified chats parsing
- Removed quota calculations from status renderers
Files:
- web/src/components/table/tokens/TokensColumnDefs.js
- web/src/components/table/users/UsersColumnDefs.js
Replace legacy single-column unique indexes with composite unique indexes on
(name, deleted_at) and introduce a safe index drop utility to eliminate
duplicate-key errors and noisy MySQL 1091 warnings.
WHAT
• model/model_meta.go
- Model.ModelName → `uniqueIndex:uk_model_name,priority:1`
- Model.DeletedAt → `index; uniqueIndex:uk_model_name,priority:2`
• model/vendor_meta.go
- Vendor.Name → `uniqueIndex:uk_vendor_name,priority:1`
- Vendor.DeletedAt → `index; uniqueIndex:uk_vendor_name,priority:2`
• model/main.go
- Add `dropIndexIfExists(table, index)`:
• Checks `information_schema.statistics`
• Drops index only when present (avoids Error 1091)
- Invoke helper in `migrateDB` & `migrateDBFast`
- Remove direct `ALTER TABLE … DROP INDEX …` calls
WHY
• Users received `Error 1062 (23000)` when re-creating a soft-deleted
model/vendor because the old unique index enforced uniqueness on name alone.
• Directly dropping nonexistent indexes caused MySQL `Error 1091` noise.
HOW
• Composite unique indexes `(model_name, deleted_at)` / `(name, deleted_at)`
respect GORM soft deletes.
• Safe helper ensures idempotent migrations across environments.
RESULT
• Users can now delete and re-add the same model or vendor without manual SQL.
• Startup migration runs quietly across MySQL, PostgreSQL, and SQLite.
• No behavior changes for existing data beyond index updates.
TEST
1. Add model “deepseek-chat” → delete (soft) → re-add → success.
2. Add vendor “DeepSeek” → delete (soft) → re-add → success.
3. Restart service twice → no duplicate key or 1091 errors.
* Added full GNU Affero General Public License v3 header at the top of `JSONEditor.js`.
* Removed unused `IconCode` and `IconRefresh` imports to eliminate dead code.
* Set `closeIcon={null}` and applied `!rounded-md` class for `Banner`, improving visual consistency and preventing unintended dismissal.
* Normalized whitespace and line-breaks for better readability and lint compliance.
Ensure models and vendors can be re-created after soft deletion by switching to composite unique indexes on (name, deleted_at) and cleaning up legacy single-column unique indexes on MySQL.
Why
- MySQL raised 1062 duplicate key errors when re-adding a soft-deleted model/vendor because the legacy unique index enforced uniqueness on the name column alone (uk_model_name / uk_vendor_name), despite soft deletes.
- Users encountered errors such as:
- Error 1062 (23000): Duplicate entry 'deepseek-chat' for key 'models.uk_model_name'
- Error 1062 (23000): Duplicate entry 'DeepSeek' for key 'vendors.uk_vendor_name'
How
- Model indices:
- model/model_meta.go:
- Model.ModelName → gorm: uniqueIndex:uk_model_name,priority:1
- Model.DeletedAt → gorm: index; uniqueIndex:uk_model_name,priority:2
- Vendor indices:
- model/vendor_meta.go:
- Vendor.Name → gorm: uniqueIndex:uk_vendor_name,priority:1
- Vendor.DeletedAt → gorm: index; uniqueIndex:uk_vendor_name,priority:2
- Migration (automatic, idempotent):
- model/main.go (migrateDB, migrateDBFast):
- On MySQL, drop legacy single-column unique indexes if present:
- ALTER TABLE models DROP INDEX uk_model_name;
- ALTER TABLE vendors DROP INDEX uk_vendor_name;
- Then run AutoMigrate to create composite unique indexes.
- Missing-index errors are ignored to keep the migration safe to run multiple times.
Result
- Users can delete and re-add the same model/vendor name without manual SQL.
- Migration runs automatically at startup; no user action required.
- PostgreSQL and SQLite remain unaffected.
Files changed
- model/model_meta.go
- model/vendor_meta.go
- model/main.go (migrateDB, migrateDBFast)
Testing
- Create model "deepseek-chat" → delete (soft) → re-create → succeeds.
- Create vendor "DeepSeek" → delete (soft) → re-create → succeeds.
Backward compatibility
- Data remains intact; only index definitions are updated.
- Behavior is unchanged except for fixing the uniqueness constraint with soft deletes.
* Integrate `useIsMobile` hook to detect mobile devices.
* Pagination now automatically:
* sets `size="small"` on mobile screens
* enables `showQuickJumper` for quicker navigation on small screens
* Desktop behaviour remains unchanged.
This commit updates the quick-fill endpoint templates used in the model and pre-fill group editors:
• `EditModelModal.jsx`
• `EditPrefillGroupModal.jsx`
Key changes
1. Added missing default endpoints defined in `common/endpoint_defaults.go`.
- `openai-response`
- `gemini`
- `jina-rerank`
2. Ensured each template entry includes both `path` and `method` for clarity.
Benefits
• Provides one-click access to every built-in upstream endpoint, reducing manual input.
• Keeps the UI definitions in sync with backend defaults, preventing mismatch errors.
Problem
Choosing a different token-group in the pricing sidebar only updated the filter but did **not** refresh the displayed group ratio in both the Table (`@table/`) and Card (`@card/`) views. The callback used by the sidebar changed `filterGroup` yet left `selectedGroup` untouched, so ratio columns/cards kept showing the previous value.
Solution
• `PricingSidebar.jsx`
– Accept new prop `handleGroupClick` (from `useModelPricingData`).
– Forward this callback to `PricingGroups` (`setFilterGroup={handleGroupClick}`) while retaining `setFilterGroup` for reset logic.
– Keeps both `filterGroup` filtering and `selectedGroup` state in sync via the single unified handler.
Result
Switching groups in the sidebar now simultaneously updates:
1. the model list filtering, and
2. the ratio information shown in both pricing Table and Card views.
No UI/UX regression; linter passes.
The sidebar’s admin section now displays “Channel Management” before “Model Management” to better reflect common user workflows and improve navigation clarity.
Details:
• Updated `web/src/components/layout/SiderBar.js`
– Re-ordered items in `adminItems` array so `channel` precedes `models`.
• No logic or route changes; this is purely a UI ordering adjustment.
This change enhances usability for administrators by presenting frequently accessed channel settings first.
Changes
1. ModelPricingTable.jsx
• Compute `autoChain` as the intersection of `autoGroups` and the model’s `enable_groups` (order preserved).
• Display the chain banner only when `autoChain.length > 0`; banner shows the reduced path (e.g. `a → c → e`).
• Dropped obsolete `selectedGroup` prop; all callers updated.
2. ModelDetailSideSheet.jsx / PricingPage.jsx
• Removed forwarding of deleted `selectedGroup` prop.
Outcome
– “Auto group routing” appears only for models that actually participate in the chain, avoiding empty or irrelevant banners.
– Codebase simplified by eliminating an unused prop.
Detailed changes
Backend
• `controller/pricing.go` now includes `auto_groups` in `/api/pricing` response, sourced from `setting.AutoGroups`.
Frontend
• `useModelPricingData.js`
– Parses `auto_groups` and exposes `autoGroups` state.
• `PricingPage.jsx` → `ModelDetailSideSheet.jsx` → `ModelPricingTable.jsx`
– Thread `autoGroups` through component tree.
• `ModelPricingTable.jsx`
– Removes deprecated `getGroupDescription` / `Tooltip`.
– Filters out `auto` when building price table rows.
– Renders a descriptive banner: “auto 分组调用链路 → auto → group1 → …”, clarifying fallback order without showing prices.
• Minor i18n tweak: adds `auto分组调用链路` key for the banner text.
Why
Users were confused by the “auto” tag appearing alongside regular groups with no price.
This change:
1. Makes the routing chain explicit.
2. Keeps the pricing table focused on billable groups.
No breaking API changes; existing clients can ignore the new `auto_groups` field.
- Added support to fetch and render “model prefill groups” in `EditChannelModal.jsx`
- Users can now click a group button to instantly merge that group’s models into the models Select
- Mirrors the prefill-group UX used for tags/endpoints in `EditModelModal.jsx`
Details
- UI/UX:
- Renders one button per model group inside the models field’s extra actions
- Clicking a button merges its items into the selected models (trimmed, deduplicated), updating immediately
- Non-destructive and works alongside existing actions (fill related/all models, fetch upstream, clear, copy)
- API:
- GET `/api/prefill_group?type=model`
- Handles `items` as either an array or a JSON string array for robustness
- If request fails or returns no groups, buttons are simply not shown
- i18n:
- Reuses existing i18n; group names come from backend and are displayed as-is
- Performance:
- Simple set merge; negligible overhead
- Backward compatibility:
- No changes required on the backend or elsewhere; feature is additive
- Testing (manual):
1) Open channel modal (new or edit) and navigate to the Models section
2) Confirm model group buttons render when groups are configured
3) Click a group button → models Select updates with merged models (no duplicates)
4) Verify other actions (fill related/all, fetch upstream, clear, copy) still work
5) Close/reopen modal → state resets as expected
Implementation
- `web/src/components/table/channels/modals/EditChannelModal.jsx`
- Added `modelGroups` state and `fetchModelGroups()` (GET `/api/prefill_group?type=model`)
- Invoked `fetchModelGroups()` when the modal opens
- Rendered group buttons in the models Select `extraText`, merging group items into current selection
Chore
- Verified no new linter errors were introduced.
- Move model price column to fixed right position
- Convert endpoint types column from fixed to regular column
- Reorder columns: endpoint types now appears before ratio column
- Improve table layout and user experience for pricing data viewing
Changes made to web/src/components/table/model-pricing/view/table/PricingTableColumns.js:
* Removed `fixed: 'right'` from endpointColumn
* Added `fixed: 'right'` to priceColumn
* Updated column order in the columns array
- Why:
- Eliminate `gorm.io/datatypes` for a single field and fix scan errors when drivers return JSON as string.
- Prevent JSONEditor manual mode from locking on invalid JSON and from appending stray characters after “Fill Template”.
- What:
- Backend (`model/prefill_group.go`):
- Replaced `datatypes.JSON` with `JSONValue` (based on `json.RawMessage`) for `PrefillGroup.Items`.
- Implemented `sql.Scanner` and `driver.Valuer` to accept both `[]byte` and `string`.
- Implemented `MarshalJSON`/`UnmarshalJSON` to preserve raw JSON in API without base64.
- Converted comments to Chinese.
- Frontend (`web/src/components/common/ui/JSONEditor.js`):
- Added `manualText` buffer for manual mode to avoid input being overridden by external value.
- Only propagate `onChange` when manual text is valid JSON; otherwise show error but do not block typing.
- Safe manual-mode rendering: derive rows from `manualText` and avoid calling `split` on non-strings.
- Improved mode toggle: populate `manualText` from visual data; validate before switching back to visual.
- Fixed “Fill Template” to sync `manualText`, `jsonData`, and `onChange` to avoid stray trailing characters.
- Impact:
- Resolves: “unsupported Scan, storing driver.Value type string into type *json.RawMessage”.
- Resolves: `value.split is not a function` in manual mode.
- Resolves: extra `s` appended after inserting template.
- API shape and DB column type remain the same (`gorm:"type:json"`); no `go.mod` changes.
- Lints pass for modified files.
Files changed:
- model/prefill_group.go
- web/src/components/common/ui/JSONEditor.js
- Why:
- Avoid introducing `gorm.io/datatypes` for a single field.
- Align with existing pattern (`ChannelInfo`, `Properties`) using `Scanner`/`Valuer`.
- Fix runtime error when drivers return JSON as string.
- What:
- Introduced `JSONValue` (based on `json.RawMessage`) implementing `sql.Scanner` and `driver.Valuer`, with `MarshalJSON`/`UnmarshalJSON` to preserve raw JSON in API.
- Updated `PrefillGroup.Items` to use `JSONValue` with `gorm:"type:json"`.
- Localized comments in `model/prefill_group.go` to Chinese.
- Impact:
- Resolves “unsupported Scan, storing driver.Value type string into type *json.RawMessage”.
- Works with MySQL/Postgres/SQLite whether JSON is returned as `[]byte` or `string`.
- API and DB schema remain unchanged; no `go.mod` changes; lints pass.
Files changed:
- model/prefill_group.go
- Why: Avoid adding `gorm.io/datatypes` for a single field; the rest of the codebase does not use it, and using the standard library keeps dependencies lean.
- What:
- Switched `PrefillGroup.Items` from `datatypes.JSON` to `json.RawMessage`.
- Updated imports in `model/prefill_group.go` to use `encoding/json` and removed the unused `gorm.io/datatypes`.
- Preserved `gorm:"type:json"` so DB column behavior remains the same.
- Impact:
- API response/request shape for `items` remains unchanged (still JSON).
- DB schema behavior is unchanged; GORM migration continues to handle the field as JSON.
- No other references to `datatypes` exist; no `go.mod` changes needed.
- Lints pass for the modified file.
Files changed:
- model/prefill_group.go
No breaking changes.
- Move `items` field (`JSONEditor` for endpoint type, `Form.TagInput` otherwise) into the first “Basic Information” card
- Remove the second “Content Configuration” card and its header; consolidate to a single-card layout
- Preserve form initialization, validation, and submit logic; API payload structure remains unchanged
- Improves clarity and reduces visual clutter without altering behavior
- Lint passes
Affected file:
- `web/src/components/table/models/modals/EditPrefillGroupModal.jsx`
No breaking changes.
- Why
- Needed to separate help text from action buttons in JSONEditor for better layout and UX.
- Models table should robustly render both new object-based endpoint mappings and legacy arrays.
- Columns should re-render when vendor map changes.
- Minor import cleanups for consistency.
- What
- JSONEditor.js
- Added optional prop extraFooter to render content below the extraText divider.
- Kept extraText rendered via Divider; extraFooter appears on the next line for clear separation.
- EditModelModal.jsx
- Moved endpoint group buttons from extraText into extraFooter to display under the helper text.
- Kept merge-logic: group items are merged into current endpoints JSON with key override semantics.
- Consolidated lucide-react imports into a single line.
- ModelsColumnDefs.js
- Made endpoint renderer resilient:
- Supports object-based JSON (keys as endpoint types) and legacy array format.
- Displays keys/items as tags and limits the number shown; uses stringToColor for visual consistency.
- Consolidated Semi UI imports into a single line.
- ModelsTable.jsx
- Fixed columns memoization dependency to include vendorMap, ensuring re-render when vendor data changes.
- Notes
- Backward-compatible: extraFooter is additive; existing JSONEditor usage remains unchanged.
- No API changes to backend.
- No linter errors introduced.
- Files touched
- web/src/components/common/ui/JSONEditor.js
- web/src/components/table/models/modals/EditModelModal.jsx
- web/src/components/table/models/ModelsColumnDefs.js
- web/src/components/table/models/ModelsTable.jsx
- Impact
- Clearer UI for endpoint editing (buttons now below helper text).
- Correct endpoints display for object-based mappings in models list.
- More reliable reactivity when vendor data updates.
Backend (Go)
- Include custom endpoints in each model’s SupportedEndpointTypes by parsing Model.Endpoints (JSON) and appending keys alongside native endpoint types.
- Build a global supportedEndpointMap map[string]EndpointInfo{path, method} by:
- Seeding with native defaults.
- Overriding/adding from models.endpoints (accepts string path → default POST, or {path, method}).
- Expose supported_endpoint at the top level of /api/pricing (vendors-like), removing per-model duplication.
- Fix default path for EndpointTypeOpenAIResponse to /v1/responses.
- Keep concurrency/caching for pricing retrieval intact.
Frontend (React)
- Fetch supported_endpoint in useModelPricingData and propagate to PricingPage → ModelDetailSideSheet → ModelEndpoints.
- ModelEndpoints
- Resolve path+method via endpointMap; replace {model} with actual model name.
- Fix mobile visibility; always show path and HTTP method.
- JSONEditor
- Wrap with Form.Slot to inherit form layout; simplify visual styles.
- Use Tabs for “Visual” / “Manual” modes.
- Unify editors: key-value editor now supports nested JSON:
- “+” to convert a primitive into an object and add nested fields.
- Add “Convert to value” for two‑way toggle back from object.
- Stable key rename without reordering rows; new rows append at bottom.
- Use Row/Col grid for clean alignment; region editor uses Form.Slot + grid.
- Editing flows
- EditModelModal / EditPrefillGroupModal use JSONEditor (editorType='object') for endpoint mappings.
- PrefillGroupManagement renders endpoint group items by JSON keys.
Data expectations / compatibility
- models.endpoints should be a JSON object mapping endpoint type → string path or {path, method}. Strings default to POST.
- No schema changes; existing TEXT field continues to store JSON.
QA
- /api/pricing now returns custom endpoint types and global supported_endpoint.
- UI shows both native and custom endpoints; paths/methods render on mobile; nested editing works and preserves order.
Add visual distinction for enabled/disabled models by applying different
background colors to table rows based on model status. This implementation
follows the same pattern used in ChannelsTable for consistent user experience.
Changes:
- Modified handleRow function in useModelsData.js to include row styling
- Disabled models (status !== 1) now display with gray background using
--semi-color-disabled-border CSS variable
- Enabled models (status === 1) maintain normal background color
- Preserved existing row click selection functionality
This enhancement improves the visual feedback for users to quickly identify
which models are active vs inactive in the models management interface.
This commit significantly refactors the `EditModelModal` component to streamline the user interface and enhance usability, aligning it with the interaction patterns found elsewhere in the application.
- **Consolidated Layout:** Merged the "Vendor Information" and "Feature Configuration" sections into a single "Basic Information" card. This simplifies the form, reduces clutter, and makes all settings accessible in one view.
- **Improved Prefill Groups:** Replaced the separate `Select` dropdowns for tag and endpoint groups with a more intuitive button-based system within the `extraText` of the `TagInput` components.
- **Additive Button Logic:** The prefill group buttons now operate in an additive mode. Users can click multiple group buttons to incrementally add tags or endpoints, with duplicates being automatically handled.
- **Clear Functionality:** Added "Clear" buttons for both tags and endpoints, allowing users to easily reset the fields.
- **Code Cleanup:** Removed the unused `endpointOptions` constant and unnecessary icon imports (`Building`, `Settings`) to keep the codebase clean.
Summary
• Backend
– Moved duplicate-name validation and total vendor-count aggregation from controllers (`controller/model_meta.go`, `controller/vendor_meta.go`, `controller/prefill_group.go`) to model layer (`model/model_meta.go`, `model/vendor_meta.go`, `model/prefill_group.go`).
– Added `GetVendorModelCounts()` and `Is*NameDuplicated()` helpers; controllers now call these instead of duplicating queries.
– API response for `/api/models` now returns `vendor_counts` with per-vendor totals across all pages, plus `all` summary.
– Removed redundant checks and unused imports, eliminating `go vet` warnings.
• Frontend
– `useModelsData.js` updated to consume backend-supplied `vendor_counts`, calculate the `all` total once, and drop legacy client-side counting logic.
– Simplified initial data flow: first render now triggers only one models request.
– Deleted obsolete `updateVendorCounts` helper and related comments.
– Ensured search flow also sets `vendorCounts`, keeping tab badges accurate.
Why
This refactor enforces single-responsibility (aggregation in model layer), delivers consistent totals irrespective of pagination, and removes redundant client queries, leading to cleaner code and better performance.
Summary
-------
1. Pricing generation
• `model/pricing.go`: skip any model whose `status != 1` when building
`pricingMap`, ensuring disabled models are never returned to the
front-end.
2. Cache refresh placement
• `controller/model_meta.go`
– Removed `model.RefreshPricing()` from pure read handlers
(`GetAllModelsMeta`, `SearchModelsMeta`).
– Kept refresh only in mutating handlers
(`Create`, `Update`, `Delete`), guaranteeing data is updated
immediately after an admin change while avoiding redundant work
on every read.
Result
------
Front-end no longer receives information about disabled models, and
pricing cache refreshes occur exactly when model data is modified,
improving efficiency and consistency.
Summary
-------
This commit unifies soft-delete behaviour across meta tables and
introduces an in-memory cache for model pricing look-ups to improve
throughput under high concurrency.
Details
-------
Soft-delete consistency
• PrefillGroup / Vendor / Model
– Added `gorm.DeletedAt` field with `json:"-" gorm:"index"`.
– Replaced plain `uniqueIndex` with partial unique indexes
`uniqueIndex:<name>,where:deleted_at IS NULL`
allowing duplicate keys after logical deletion while preserving
uniqueness for active rows.
• Imports updated to include `gorm.io/gorm`.
• JSON output now hides `deleted_at`, matching existing tables.
High-throughput pricing cache
• model/pricing.go
– Added thread-safe maps `modelEnableGroups` & `modelQuotaTypeMap`
plus RW-mutex for O(1) access.
– `updatePricing()` now refreshes these maps alongside `pricingMap`.
• model/model_extra.go
– Rewrote `GetModelEnableGroups` & `GetModelQuotaType` to read from
the new maps, falling back to automatic refresh via `GetPricing()`.
Misc
• Retained `RefreshPricing()` helper for immediate cache invalidation
after admin actions.
• All modified files pass linter; no breaking DB migrations required
(handled by AutoMigrate).
Result
------
– Soft-delete logic is transparent, safe, and allows record “revival”.
– Pricing-related queries are now constant-time, reducing CPU usage and
latency under load.
Why:
• The vendor list API is separate from the models API, causing the “Vendor” column in `ModelsTable` to flash (rendering `'-'` first, then updating) after the table finishes loading.
• This visual jump degrades the user experience.
What:
• Updated `web/src/hooks/models/useModelsData.js`
– In the initial `useEffect`, vendors are fetched first with `loadVendors()` and awaited.
– Only after vendors are ready do we call `loadModels()`, ensuring `vendorMap` is populated before the table renders.
Outcome:
• The table now renders with complete vendor data on first paint, removing the flicker and providing a smoother UI.
- Update PricingCardSkeleton grid classes from 'sm:grid-cols-2 lg:grid-cols-3'
to 'xl:grid-cols-2 2xl:grid-cols-3' to match PricingCardView layout
- Ensures consistent column count between skeleton and actual content
at same screen sizes
- Improves loading state visual consistency across different breakpoints
- **Backend Changes:**
- Refactor pricing API to return separate vendors array with ID-based model references
- Remove redundant vendor_name/vendor_icon fields from pricing records, use vendor_id only
- Add vendor_description to pricing response for frontend display
- Maintain 1-minute cache protection for pricing endpoint security
- **Frontend Data Flow:**
- Update useModelPricingData hook to build vendorsMap from API response
- Enhance model records with vendor info during data processing
- Pass vendorsMap through component hierarchy for consistent vendor data access
- **UI Component Replacements:**
- Replace PricingCategories with PricingVendors component for vendor-based filtering
- Replace PricingCategoryIntro with PricingVendorIntro in header section
- Remove all model category related components and logic
- **Header Improvements:**
- Implement vendor intro with real backend data (name, icon, description)
- Add text collapsible feature (2-line limit with expand/collapse functionality)
- Support carousel animation for "All Vendors" view with vendor icon rotation
- **Model Detail Modal Enhancements:**
- Update ModelHeader to use real vendor icons via getLobeHubIcon()
- Move tags from header to ModelBasicInfo content area to avoid SideSheet title width constraints
- Display only custom tags from backend with stringToColor() for consistent styling
- Use Space component with wrap property for proper tag layout
- **Table View Optimizations:**
- Integrate RenderUtils for description and tags columns
- Implement renderLimitedItems for tags (max 3 visible, +x popover for overflow)
- Use renderDescription for text truncation with tooltip support
- **Filter Logic Updates:**
- Vendor filter shows disabled options instead of hiding when no models match
- Include "Unknown Vendor" category for models without vendor information
- Remove all hardcoded vendor descriptions, use real backend data
- **Code Quality:**
- Fix import paths after component relocation
- Remove unused model category utilities and hardcoded mappings
- Ensure consistent vendor data usage across all pricing views
- Maintain backward compatibility with existing pricing calculation logic
This refactor provides a more scalable vendor-based architecture while eliminating
data redundancy and improving user experience with real-time backend data integration.
Add flexible model name matching system to support different matching patterns:
Backend changes:
- Add `name_rule` field to Model struct with 4 matching types:
* 0: Exact match (default)
* 1: Prefix match
* 2: Contains match
* 3: Suffix match
- Implement `FindModelByNameWithRule` function with priority order:
exact > prefix > suffix > contains
- Add database migration for new `name_rule` column
Frontend changes:
- Add "Match Type" column in models table with colored tags
- Add name rule selector in create/edit modal with validation
- Auto-set exact match and disable selection for preconfigured models
- Add explanatory text showing priority order
- Support i18n for all new UI elements
This enables users to define model patterns once and reuse configurations
across similar models, reducing repetitive setup while maintaining exact
match priority for specific overrides.
Closes: #[issue-number]
Summary
• Backend
1. model/model_meta.go
– Added `QuotaType` field to `Model` struct (JSON only, gorm `-`).
2. model/model_groups.go
– Implemented `GetModelQuotaType(modelName)` leveraging cached pricing map.
3. controller/model_meta.go
– Enhanced `fillModelExtra` to populate `QuotaType` using new helper.
• Frontend
1. web/src/components/table/models/ModelsColumnDefs.js
– Introduced `renderQuotaType` helper that visualises billing mode with coloured tags (`teal = per-call`, `violet = per-token`).
– Added “计费类型” column (`quota_type`) to models table.
Why
Providing the billing mode alongside existing pricing/group information gives administrators instant visibility into whether each model is priced per call or per token, aligning UI with new backend metadata.
Notes
No database migration required – `quota_type` is transient, delivered via API. Frontend labels/colours can be adjusted via i18n or theme tokens if necessary.
- Add new PrefillGroup model with CRUD operations
* Support for model, tag, and endpoint group types
* JSON storage for group items with GORM datatypes
* Automatic database migration support
- Implement backend API endpoints
* GET /api/prefill_group - List groups by type with admin auth
* POST /api/prefill_group - Create new groups
* PUT /api/prefill_group - Update existing groups
* DELETE /api/prefill_group/:id - Delete groups
- Add comprehensive frontend management interface
* PrefillGroupManagement component for group listing
* EditPrefillGroupModal for group creation/editing
* Integration with EditModelModal for auto-filling
* Responsive design with CardTable and SideSheet
- Enhance model editing workflow
* Tag group selection with auto-fill functionality
* Endpoint group selection with auto-fill functionality
* Seamless integration with existing model forms
- Create reusable UI components
* Extract common rendering utilities to models/ui/
* Shared renderLimitedItems and renderDescription functions
* Consistent styling across all model-related components
- Improve user experience
* Empty state illustrations matching existing patterns
* Fixed column positioning for operation buttons
* Item content display with +x indicators for overflow
* Tooltip support for long descriptions
Backend
• model/model_meta.go
– Added `EnableGroups []string` to Model struct
– fillModelExtra now populates EnableGroups
• model/model_groups.go
– New helper `GetModelEnableGroups` (reuses Pricing cache)
• model/pricing_refresh.go
– Added `RefreshPricing()` to force immediate cache rebuild
• controller/model_meta.go
– `GetAllModelsMeta` & `SearchModelsMeta` call `model.RefreshPricing()` before querying, ensuring groups / endpoints are up-to-date
Frontend
• ModelsColumnDefs.js
– Added `renderGroups` util and “可用分组” table column displaying color-coded tags
Result
Admins can now see which user groups can access each model, and any ability/group changes are reflected instantly without the previous 1-minute delay.
Overview
• Re-designed `MissingModelsModal` to align with `ModelTestModal` and deliver a cleaner, paginated experience.
• Improved mobile responsiveness for action buttons in `ModelsActions`.
Details
1. MissingModelsModal.jsx
• Switched from `List` to `Table` for a more structured view.
• Added search bar with live keyword filtering and clear icon.
• Implemented pagination via `MODEL_TABLE_PAGE_SIZE`; auto-resets on search.
• Dynamic rendering: when no data, show unified Empty state without column header.
• Enhanced header layout with total-count subtitle and modal corner rounding.
• Removed unused `Typography.Text` import.
2. ModelsActions.jsx
• Set “Delete Selected Models” and “Missing Models” buttons to `flex-1 md:flex-initial`, placing them on the same row as “Add Model” on small screens.
Result
The “Missing Models” workflow now offers quicker discovery, a familiar table interface, and full mobile friendliness—without altering API behavior.
Highlights
• Introduced `Typography.Text` link with `IconLink` in `extraText` for the **icon** field, pointing to LobeHub’s full icon catalogue; only “请点击我” is clickable for clarity.
• Added required imports for `Typography` and `IconLink`.
• Removed unnecessary `size="large"` prop from the status `Form.Switch` to align with default form styling.
These tweaks improve user guidance when selecting vendor icons and refine the modal’s visual consistency.
Introduce a generic `renderLimitedItems` helper within `ModelsColumnDefs.js` to eliminate duplicated logic for list-style columns.
Key changes
• Added `renderLimitedItems` to handle item limiting, “+N” indicator, and popover display.
• Migrated `renderTags`, `renderEndpoints`, and `renderBoundChannels` to use the new helper.
• Removed redundant inline implementations, reducing complexity and improving readability.
• Preserved previous UX: first 3 items shown, overflow accessible via popover.
This refactor streamlines code maintenance and ensures consistent behavior across related columns.
1. EditModelModal quality-of-life
• Added comma parsing to `Form.TagInput`; users can now paste
`tag1, tag2 , tag3` to bulk-create tags.
• Updated placeholder copy to reflect the new capability.
All files pass linting; no runtime changes outside the intended UI updates.
• Removed obsolete `sidebarIconColors` map and `getItemColor` util from
SiderBar/render; all selected states now use the single CSS variable
`--semi-color-primary` for both text and icons.
• Simplified `getLucideIcon`:
– Added `Package` to Lucide imports.
– Switched “models” case to `<Package />`, avoiding duplication with
the Layers glyph.
– Replaced per-key color logic with `iconColor` derived from the new
uniform highlight color.
• Stripped any unused imports / dead code paths after the refactor.
• Lint passes; sidebar hover/focus behavior unchanged while visual
consistency is improved.
Highlights
──────────
1. Removed code duplication
• Introduced `extractItems` helper to safely unwrap API payloads.
• Simplified `getFormValues` to a single-line fallback expression.
• Replaced repeated list-extraction code in `loadModels`, `searchModels`,
and `refreshVendorCounts` with the new helper.
2. Vendor tab accuracy & performance
• Added `refreshVendorCounts` to recalc counts via a single lightweight
request; invoked only when必要 (current tab ≠ "all“) to avoid redundancy.
• `loadModels` still updates counts instantly when viewing "all", ensuring
accurate numbers on initial load and page changes.
3. Misc clean-ups
• Streamlined conditional URL building and state updates.
• Confirmed all async branches include error handling with i18n messages.
• Ran linter → zero issues.
Result: leaner, easier-to-maintain hook with correct, real-time vendor counts
and no repeated logic.
The update operation for Model previously overwrote `created_time` with zero
because GORM included every struct field in the UPDATE statement.
This commit adjusts `Model.Update()` to:
* Call `Omit("created_time")` so the creation timestamp is never modified.
* Refresh `UpdatedTime` with `common.GetTimestamp()` before persisting.
* Delegate the remainder of the struct to GORM, eliminating the need to
maintain an explicit allow-list whenever new fields are introduced.
No API contract is changed; existing CRUD endpoints continue to work
normally while data integrity for historical records is now guaranteed.
Backend
• model/model_meta.go
– Import strconv
– SearchModels: support numeric vendor ID filter vs. fuzzy name search
– Explicitly order by `models.id` to avoid “ambiguous column name: id” error
Frontend
• hooks/useModelsData.js
– Change vendor-filter API to pass vendor ID
– Automatically reload models when `activeVendorKey` changes
– Update vendor counts only when viewing “All” to preserve other tab totals
• Add missing effect in EditModelModal to refresh vendor list only when modal visible
• Other minor updates to keep lints clean
Result
Tabs now:
1. Trigger API requests on click
2. Show accurate per-vendor totals
3. Filter models without resetting other counts
Backend search handles both vendor IDs and names without SQL errors.
Backend
• Add `model/model_meta.go` and `model/vendor_meta.go` defining Model & Vendor entities with CRUD helpers, soft-delete and time stamps
• Create corresponding controllers `controller/model_meta.go`, `controller/vendor_meta.go` and register routes in `router/api-router.go`
• Auto-migrate new tables in DB startup logic
Frontend
• Build complete “Model Management” module under `/console/models`
- New pages, tables, filters, actions, hooks (`useModelsData`) and dynamic vendor tabs
- Modals `EditModelModal.jsx` & unified `EditVendorModal.jsx`; latter now uses default confirm/cancel footer and mobile-friendly modal sizing (`full-width` / `small`) via `useIsMobile`
• Update sidebar (`SiderBar.js`) and routing (`App.js`) to surface the feature
• Add helper updates (`render.js`) incl. `stringToColor`, dynamic LobeHub icon retrieval, and tag color palettes
Table UX improvements
• Replace separate status column with inline Enable / Disable buttons in operation column (matching channel table style)
• Limit visible tags to max 3; overflow represented as “+x” tag with padded `Popover` showing remaining tags
• Color all tags deterministically using `stringToColor` for consistent theming
• Change vendor column tag color to white for better contrast
Misc
• Minor layout tweaks, compact-mode toggle relocation, lint fixes and TypeScript/ESLint clean-up
These changes collectively deliver end-to-end model & vendor administration while unifying visual language across management tables.
Summary
• Introduced standalone `ModelSelectModal.jsx` for selecting channel models
• Fetch-list now opens modal instead of in-place select, keeping EditChannelModal lean
Modal Features
1. Search bar with `IconSearch`, keyboard clear & mobile full-screen support
2. Tab layout (“New Models” / “Existing Models”) displayed next to title, responsive wrapping
3. Models grouped by vendor via `getModelCategories` and rendered inside always-expanded `Collapse` panels
4. Per-category checkbox in panel extra area for bulk select / deselect
5. Footer checkbox for bulk select of all models in current tab, with real-time counter
6. Empty state uses `IllustrationNoResult` / `IllustrationNoResultDark` for visual consistency
7. Accessible header/footer paddings aligned with Semi UI defaults
Fixes & Improvements
• All indeterminate and full-select states handled correctly
• Consistent “selected X / Y” stats synced with active tab, not global list
• All panels now controlled via `activeKey`, ensuring they remain expanded
• Search, vendor grouping, and responsive layout tested across mobile & desktop
These changes modernise the channel model management workflow and prepare the codebase for upcoming upstream-ratio integration.
Summary
• Added role-specific localStorage keys for column visibility in three hooks:
- `useUsageLogsData.js` → `logs-table-columns-admin` / `logs-table-columns-user`
- `useMjLogsData.js` → `mj-logs-table-columns-admin` / `mj-logs-table-columns-user`
- `useTaskLogsData.js` → `task-logs-table-columns-admin` / `task-logs-table-columns-user`
Details
1. Each hook now derives a `STORAGE_KEY` based on `isAdminUser`, preventing admin and non-admin sessions from overwriting one another’s column settings.
2. Removed the previous “save but strip admin columns” workaround—settings are persisted unmodified to each role’s key.
3. Kept runtime behaviour: non-admin users still see admin-only columns forcibly hidden.
4. Replaced newly added Chinese comments with clear English equivalents for consistency.
Result
Switching between admin and non-admin accounts no longer corrupts column visibility preferences, and codebase comments are fully English-localized.
Summary
• Introduced a unified `selectFilter` helper that matches both `option.value` and `option.label`, ensuring all `<Select>` components support intuitive search (fixes channel “type” dropdown not filtering).
• Replaced all usages of the old `modelSelectFilter` with `selectFilter` in:
• `EditChannelModal.jsx`
• `SettingsPanel.js`
• `EditTokenModal.jsx`
• `EditTagModal.jsx`
• Removed the deprecated `modelSelectFilter` export from `utils.js` (no backward-compat alias).
• Updated documentation comments accordingly.
Why
The old filter only inspected `option.value`, causing searches to fail when `label` carried the meaningful text (e.g., numeric IDs for channel types). The new helper searches both fields, covering all scenarios and unifying the API across the codebase.
Notes
No functional regressions expected; all components have been migrated.
This commit introduces a unified, maintainable solution for all model-pricing filter buttons and removes redundant code.
Key points
• Added `usePricingFilterCounts` hook
- Centralises filtering logic and returns:
- `quotaTypeModels`, `endpointTypeModels`, `dynamicCategoryCounts`, `groupCountModels`
- Keeps internal helpers private (removed public `modelsAfterCategory`).
• Updated components to consume the new hook
- `PricingSidebar.jsx`
- `FilterModalContent.jsx`
• Improved button UI/UX
- `SelectableButtonGroup.jsx` now respects `item.disabled` and auto-disables when `tagCount === 0`.
- `PricingGroups.jsx` counts models per group (after all other filters) and disables groups with zero matches.
- `PricingEndpointTypes.jsx` enumerates all endpoint types, computes filtered counts, and disables entries with zero matches.
• Removed obsolete / duplicate calculations and comments to keep components lean.
The result is consistent, real-time tag counts across all filter groups, automatic disabling of unavailable options, and a single source of truth for filter computations, making future extensions straightforward.
Previously, the "Force Format" switch was displayed for every channel type
although it only applies to OpenAI (type === 1).
This change wraps the switch in a conditional so it renders exclusively when
the selected channel type is OpenAI.
Why:
- Prevents user confusion when configuring non-OpenAI channels
- Keeps the UI clean and context-relevant
Scope:
- web/src/components/table/channels/modals/EditChannelModal.jsx
No backend logic affected.
- Extract channel extra settings into a dedicated Card component for better visual hierarchy
- Replace custom gray background container with consistent Form component styling
- Simplify layout structure by removing complex Row/Col grid layout in favor of native Form component layout
- Unify help text styling by using extraText prop consistently across all form fields
- Move "Settings Documentation" link to card header subtitle for better accessibility
- Improve visual consistency with other setting cards by using matching design patterns
The channel extra settings (force format, thinking content conversion, pass-through body, proxy address, and system prompt) now follow the same design language as other configuration sections, providing a more cohesive user experience.
Affected settings:
- Force Format (OpenAI channels only)
- Thinking Content Conversion
- Pass-through Body
- Proxy Address
- System Prompt
- **Fix SideSheet double-click issue**: Remove early return for null modelData to prevent rendering blockage during async state updates
- **Component modularization**:
- Split ModelDetailSideSheet into focused sub-components (ModelHeader, ModelBasicInfo, ModelEndpoints, ModelPricingTable)
- Refactor PricingFilterModal with FilterModalContent and FilterModalFooter components
- Remove unnecessary FilterSection wrapper for cleaner interface
- **Improve visual consistency**:
- Unify avatar/icon logic between ModelHeader and PricingCardView components
- Standardize tag colors across all pricing components (violet/teal for billing types)
- Apply consistent dashed border styling using Semi UI theme colors
- **Enhance data accuracy**:
- Display raw endpoint type names (e.g., "openai", "anthropic") instead of translated descriptions
- Remove text alignment classes for better responsive layout
- Add proper null checks to prevent runtime errors
- **Code quality improvements**:
- Reduce component complexity by 52-74% through modularization
- Improve maintainability with single responsibility principle
- Add comprehensive error handling for edge cases
This refactoring improves component reusability, reduces bundle size, and provides a more consistent user experience across the model pricing interface.
Ensure non-admin users cannot enable columns reserved for administrators
across the following hooks:
* web/src/hooks/usage-logs/useUsageLogsData.js
- Force-hide CHANNEL, USERNAME and RETRY columns for non-admins.
* web/src/hooks/mj-logs/useMjLogsData.js
- Force-hide CHANNEL and SUBMIT_RESULT columns for non-admins.
* web/src/hooks/task-logs/useTaskLogsData.js
- Force-hide CHANNEL column for non-admins.
The checks run when loading column preferences from localStorage, overriding
any tampered settings to keep sensitive information hidden from
unauthorized users.
- Extract default values to DEFAULT_PRICING_FILTERS constant for centralized configuration
- Replace verbose type checks with optional chaining operator (?.) for cleaner code
- Eliminate redundant function type validations and comments
- Reduce code lines by ~50% (from 60 to 25 lines) while maintaining full functionality
- Improve code readability and follow modern JavaScript best practices
This refactoring enhances code quality without changing the function's behavior,
making it easier to maintain and modify default filter values in the future.
- Extract default values to DEFAULT_PRICING_FILTERS constant for centralized configuration
- Replace verbose type checks with optional chaining operator (?.) for cleaner code
- Eliminate redundant function type validations and comments
- Reduce code lines by ~50% (from 60 to 25 lines) while maintaining full functionality
- Improve code readability and follow modern JavaScript best practices
This refactoring enhances code quality without changing the function's behavior,
making it easier to maintain and modify default filter values in the future.
- Remove K/M switch from model price column header in pricing table
- Add "Display in K units" option to pricing display settings panel
- Update parameter passing for tokenUnit and setTokenUnit across components:
- PricingDisplaySettings: Add tokenUnit toggle functionality
- PricingSidebar: Pass tokenUnit props to display settings
- PricingFilterModal: Include tokenUnit in mobile filter modal
- Enhance resetPricingFilters utility to reset token unit to default 'M'
- Clean up PricingTableColumns by removing unused setTokenUnit parameter
- Add English translation for "按K显示单位" as "Display in K units"
This change improves UX by consolidating all display-related controls
in the filter settings panel, making the interface more organized and
the token unit setting more discoverable alongside other display options.
Affected components:
- PricingTableColumns.js
- PricingDisplaySettings.jsx
- PricingSidebar.jsx
- PricingFilterModal.jsx
- PricingTable.jsx
- utils.js (resetPricingFilters)
- en.json (translations)
- Create PricingEndpointTypes.jsx component for endpoint type filtering
- Add filterEndpointType state management in useModelPricingData hook
- Integrate endpoint type filtering logic in filteredModels computation
- Update PricingSidebar.jsx to include endpoint type filter component
- Update PricingFilterModal.jsx to support endpoint type filtering on mobile
- Extend resetPricingFilters utility function to include endpoint type reset
- Support filtering models by endpoint types (OpenAI, Anthropic, Gemini, etc.)
- Display model count for each endpoint type with localized labels
- Ensure filter state resets to first page when endpoint type changes
This enhancement allows users to filter models by their supported endpoint types,
providing more granular control over model selection in the pricing interface.
- Increase skeleton card count from 6 to 10 for better visual coverage
- Extend minimum skeleton display duration from 500ms to 1000ms for smoother UX
- Add circle shape to all pricing tags for consistent rounded design
- Apply circle styling to billing type, popularity, endpoint, and context tags
This commit improves the visual consistency and user experience of the pricing
card view by standardizing tag appearance and optimizing skeleton loading timing.
- Replace model count with group ratio display (x2.2, x1) in group filter
- Remove redundant "Available Groups" column from pricing table
- Remove "Availability" column and related logic completely
- Move "Supported Endpoint Types" column to fixed right position
- Clean up unused parameters and variables in PricingTableColumns.js
- Optimize variable declarations (let → const) and simplify render logic
- Improve code readability and reduce memory allocations
This refactor enhances user experience by:
- Providing clearer group ratio information in filters
- Simplifying table layout while maintaining essential functionality
- Improving performance through better code organization
Breaking changes: None
Filter out the special empty string group ("": "用户分组") from the
usable groups in PricingGroups component. This empty group represents
"user's current group" but contains no data and should not be displayed
in the group filter options.
- Add filter condition to exclude empty string keys from usableGroup
- Prevents displaying invalid empty group option in UI
- Improves user experience by showing only valid selectable groups
Add comprehensive loading state support with skeleton animations for the SelectableButtonGroup component, improving user experience during data loading.
Key Changes:
- Add loading prop to SelectableButtonGroup with minimum 500ms display duration
- Implement skeleton buttons with proper Semi-UI Skeleton wrapper and active animation
- Use fixed skeleton count (6 items) to prevent visual jumping during load transitions
- Pass loading state through all pricing filter components hierarchy:
- PricingSidebar and PricingFilterModal as container components
- PricingDisplaySettings, PricingCategories, PricingGroups, PricingQuotaTypes as filter components
Technical Details:
- Reference CardTable.js implementation for consistent skeleton UI patterns
- Add useEffect hook for 500ms minimum loading duration control
- Support both checkbox and regular button skeleton modes
- Maintain responsive layout compatibility (mobile/desktop)
- Add proper JSDoc parameter documentation for loading prop
Fixes:
- Prevent skeleton count sudden changes that caused visual discontinuity
- Ensure proper skeleton animation with Semi-UI active parameter
- Maintain consistent loading experience across all filter components
- Add withCheckbox prop to SelectableButtonGroup component for checkbox-prefixed buttons
- Support both single value and array activeValue for multi-selection scenarios
- Refactor PricingDisplaySettings to use consistent SelectableButtonGroup styling
- Replace Switch components with checkbox-enabled SelectableButtonGroup
- Replace Select dropdown with SelectableButtonGroup for currency selection
- Maintain unified UI/UX across all pricing filter components
- Add proper JSDoc documentation for new withCheckbox functionality
This improves visual consistency and provides a more cohesive user experience
in the model pricing filter interface.
Summary
• Swapped out the old availability UI for clearer icon-based feedback.
• Users now see a green check icon when their group can use a model and a red × icon (with tooltip) when it cannot.
Details
1. Imports
• Removed deprecated `IconVerify`.
• Added `IconCheckCircleStroked` ✅ and `IconClose` ❌ for new states.
2. Availability column
• `renderAvailable` now
– Shows a green `IconCheckCircleStroked` inside a popover (“Your group can use this model”).
– Shows a red `IconClose` inside a popover (“你的分组无权使用该模型”) when the model is inaccessible.
– Eliminates the empty cell/grey tag fallback.
3. Group tag
• Updated selected-group tag to use `IconCheckCircleStroked` for visual consistency.
Result
Improves UX by providing explicit visual cues for model availability and removes ambiguous blank cells.
Centralize filter-reset logic to improve maintainability and consistency.
- Add `resetPricingFilters` helper to `web/src/helpers/utils.js`, encapsulating all reset actions (search, category, currency, ratio, group, quota type, etc.).
- Update `PricingFilterModal.jsx` and `PricingSidebar.jsx` to import and use the new utility instead of keeping their own duplicate `handleResetFilters`.
- Removes repeated code, ensures future changes to reset behavior require modification in only one place, and keeps components lean.
* **PricingDisplaySettings.jsx**
• Extracted display settings (recharge price, currency, ratio toggle) from PricingSidebar
• Maintains complete styling and functionality as standalone component
* **SelectableButtonGroup.jsx**
• Added isMobile detection with conditional Col spans
• Mobile: `span={12}` (2 buttons per row) for better touch experience
• Desktop: preserved responsive grid `xs={24} sm={24} md={24} lg={12} xl={8}`
* **PricingSidebar.jsx**
• Updated imports to use new PricingDisplaySettings component
• Simplified component structure while preserving reset logic
These changes enhance code modularity and provide optimized mobile UX for filter button groups across the pricing interface.
The VolcEngine Ark/Doubao channel now has a hard-coded base URL inside the backend, so it no longer requires any API-address settings on the front-end side.
Previously, the input field was hidden but the surrounding “API Config” card still rendered, leaving a blank, confusing section.
Changes made
• Added `showApiConfigCard` flag (true when `inputs.type !== 45`) right after the state declarations.
• Wrapped the entire “API Config” card in a conditional render driven by this flag.
• Removed the duplicate declaration of `showApiConfigCard` further down in the component to avoid shadowing and improve readability.
Scope verification
• Checked all other channel types: every remaining type either displays a dedicated API-related input/banner (3, 8, 22, 36, 37, 40, …) or falls back to the generic “custom API address” field.
• Therefore, only type 45 requires the card to be fully hidden.
Result
The “Edit Channel” modal now shows no empty card for the VolcEngine Ark/Doubao channel, leading to a cleaner and more intuitive UI while preserving behaviour for all other channels.
- Add left-right pagination layout for desktop (total info on left, controls on right)
- Keep mobile layout centered with pagination controls only
- Implement proper i18n support for pagination text using react-i18next
- Add pagination translations for Chinese and English
- Standardize t function usage across all table components to use xxxData.t pattern
- Update CardPro footer layout to support justify-between on desktop
- Use CSS variable --semi-color-text-2 for consistent text styling
- Disable built-in Pagination showTotal to avoid duplication
Components updated:
- CardPro: Enhanced footer layout with responsive design
- createCardProPagination: Added i18n support and custom total text
- All table components: Unified t function usage pattern
- i18n files: Added pagination-related translations
The pagination now displays "Showing X to Y of Z items" on desktop
and maintains existing centered layout on mobile devices.
- Break down monolithic ModelPricing.js (685 lines) into focused components:
* ModelPricingHeader.jsx - top status card with pricing information
* ModelPricingTabs.jsx - model category navigation tabs
* ModelPricingFilters.jsx - search and action controls
* ModelPricingTable.jsx - data table with pricing details
* ModelPricingColumnDefs.js - table column definitions and renderers
- Create custom hook useModelPricingData.js for centralized state management:
* Consolidate all business logic and API calls
* Manage pricing calculations and data transformations
* Handle search, filtering, and UI interactions
- Follow project conventions matching other table components:
* Adopt same file structure as channels/, users/, tokens/ modules
* Maintain consistent naming patterns and component organization
* Preserve all original functionality including responsive design
- Update import paths:
* Remove obsolete ModelPricing.js file
* Update Pricing page to use new ModelPricingPage component
* Fix missing import references
Benefits:
- Improved maintainability with single-responsibility components
- Enhanced code reusability and testability
- Better team collaboration with modular structure
- Consistent codebase architecture across all table components
Some upstream Kling deployments still expect the legacy `model` key
instead of `model_name`.
This change adds the `model` field to `requestPayload` and populates it
with the same value as `model_name`, ensuring the generated JSON works
with both old and new versions.
Changes:
• Added `Model string "json:\"model,omitempty\""` to `requestPayload`
• Set `Model` alongside `ModelName` in `convertToRequestPayload`
• Updated comments to clarify compatibility purpose
Result:
Kling task requests now contain both `model_name` and `model`, removing
integration issues with upstreams that only recognize one of the keys.
Previously, the KlingRequestConvert middleware only extracted model name from
the 'model_name' field, which caused 503 errors when requests used the 'model'
field instead. This enhancement improves API compatibility by supporting both
field names.
Changes:
- Modified KlingRequestConvert() to check for 'model' field if 'model_name' is empty
- Maintains backward compatibility with existing 'model_name' usage
- Fixes "no available channels for model" error when model field was not recognized
This resolves issues where valid Kling API requests were failing due to field
name mismatches, improving the overall user experience for video generation APIs.
t0ng7u