- Truncate long labels via pure CSS and always show full text in a Tooltip
- Ensure the right-side Tag is never truncated and remains fully visible
- Simplify implementation: remove overflow detection and ResizeObserver
- Use minimal markup with sbg-button/sbg-inner/sbg-label to enable shrinking
- Add global rules to allow `.semi-button-content` to shrink and ellipsize
Files:
- web/src/components/common/ui/SelectableButtonGroup.jsx
- web/src/index.css
No API changes; visuals improved and code complexity reduced.
Frontend
- Models table (model management):
- Render billing types with the same segmented list component (renderLimitedItems) used by tags and endpoints
- Display quota_types as an array with capped items (maxDisplay: 3) and graceful fallback for unknown types
- Pricing view (unchanged by request):
- Revert to single-value quota_type rendering and sorter
- Keep ratio display logic based on quota_type only
Files
- web/src/components/table/models/ModelsColumnDefs.js
- web/src/components/table/model-pricing/view/table/PricingTableColumns.js
Notes
- This commit only adjusts the model management UI rendering; pricing views remain as-is
Backend
- Add GetBoundChannelsByModelsMap to batch-fetch bound channels via a single JOIN (Distinct), compatible with SQLite/MySQL/PostgreSQL
- Replace per-record enrichment with a single-pass enrichModels to avoid N+1 queries; compute unions for prefix/suffix/contains matches in memory
- Change Model.QuotaType to QuotaTypes []int and expose quota_types in responses
- Add GetModelQuotaTypes for cached O(1) lookups; exact models return a single-element array
- Sort quota_types for stable output order
- Remove unused code: GetModelByName, GetBoundChannels, GetBoundChannelsForModels, FindModelByNameWithRule, buildPrefixes, buildSuffixes
- Clean up redundant comments, keeping concise and readable code
Frontend
- Models table: switch to quota_types, render multiple billing modes ([0], [1], [0,1], future values supported)
- Pricing table: switch to quota_types; ratio display now checks quota_types.includes(0); array rendering for billing tags
Compatibility
- SQL uses standard JOIN/IN/Distinct; works across SQLite/MySQL/PostgreSQL
- Lint passes; no DB schema changes (quota_types is a JSON response field only)
Breaking Change
- API field renamed: quota_type -> quota_types (array). Update clients accordingly.
Summary
-------
1. **Backend**
ā¢ `model/model_meta.go`
ā Add `MatchedModels []string` and `MatchedCount int` (ignored by GORM) to expose matching details in API responses.
ā¢ `controller/model_meta.go`
ā When processing prefix/suffix/contains rules in `fillModelExtra`, collect every matched model name, fill `MatchedModels`, and calculate `MatchedCount`.
2. **Frontend**
ā¢ `web/src/components/table/models/ModelsColumnDefs.js`
ā Import `Tooltip`.
ā Enhance `renderNameRule` to:
ā Display tag text like āåē¼ 5äøŖęØ”åā for non-exact rules.
ā Show a tooltip listing all matched model names on hover.
Impact
------
Users now see the total number of concrete models aggregated under each prefix/suffix/contains rule and can inspect the exact list via tooltip, improving transparency in model management.
Summary
-------
1. **Backend**
ā¢ `controller/model_meta.go`
ā For prefix/suffix/contains rules, aggregate endpoints, bound channels, enable groups, and quota types across all matched models.
ā When mixed billing types are detected, return `quota_type = -1` (unknown) instead of defaulting to volume-based.
2. **Frontend**
ā¢ `web/src/helpers/utils.js`
ā `calculateModelPrice` now handles `quota_type = -1`, returning placeholder `'-'`.
ā¢ `web/src/components/table/model-pricing/view/card/PricingCardView.jsx`
ā Billing tag logic updated: displays āęę¬”č®”č“¹ā (times), āęéč®”č“¹ā (volume), or `'-'` for unknown.
ā¢ `web/src/components/table/model-pricing/view/table/PricingTableColumns.js`
ā `renderQuotaType` shows āęŖē„ā for unknown billing type.
ā¢ `web/src/components/table/models/ModelsColumnDefs.js`
ā Unified `renderQuotaType` to return `'-'` when type is unknown.
ā¢ `web/src/components/table/model-pricing/modal/components/ModelPricingTable.jsx`
ā Group price table honors unknown billing type; pricing columns show `'-'` and neutral tag color.
3. **Utilities**
ā¢ Added safe fallback colours/tags for unknown billing type across affected components.
Impact
------
ā¢ Ensures correct data aggregation for non-exact model matches.
ā¢ Prevents UI from implying volume billing when actual type is ambiguous.
ā¢ Provides consistent placeholder display (`'-'` or āęŖē„ā) across cards, tables and modals.
No breaking API changes; frontend gracefully handles legacy values.
Summary:
ā¢ Updated `helpers/utils.js` to display the āgroupā label without a colon, ensuring consistent typography with other price elements.
Details:
1. `formatPriceInfo`
ā Changed `{t('åē»')}:` to `{t('åē»')}` for a cleaner look.
ā Keeps spacing intact between label and selected group name.
2. No functional impact; purely visual polish.
Summary:
ā¢ Updated `PricingTopSection.jsx` to conditionally render `PricingVendorIntroWithSkeleton` only when `isMobile` is false.
Details:
1. Wrapped vendor-intro block in `!isMobile` check, preventing unnecessary content on small screens.
2. Kept desktop experience unchanged; no impact on other features.
3. Lint check passed with no new issues.
Result:
Cleaner mobile UI with improved performance and visual focus.
Overview:
ā¢ Introduced a new āModel Tagā filter across pricing screens
ā¢ Refactored `usePricingFilterCounts` to eliminate duplicated logic
ā¢ Improved tag handling to be case-insensitive and deduplicated
ā¢ Extended utilities to reset & persist the new filter
Details:
1. Added `filterTag` state to `useModelPricingData` and integrated it into all filtering paths.
2. Created reusable `PricingTags` component using `SelectableButtonGroup`.
3. Incorporated tag filter into `PricingSidebar` and mobile `PricingFilterModal`, including reset support.
4. Enhanced `resetPricingFilters` (helpers/utils) to restore tag filter defaults.
5. Refactored `usePricingFilterCounts.js`:
ā¢ Centralized predicate `matchesFilters` to remove redundancy
ā¢ Normalized tag parsing via `normalizeTags` helper
ā¢ Memoized model subsets with concise filter calls
6. Updated lints ā zero errors after refactor.
Result:
Users can now filter models by custom tags with consistent UX, and internal logic is cleaner, faster, and easier to extend.
Previously, the card view displayed a ā-ā whenever a model had no custom tags,
because `renderLimitedItems` returned a dash for an empty array.
Now the function is only invoked when `customTags.length > 0`, removing the
unwanted placeholder and keeping the UI clean.
File affected:
- web/src/components/table/model-pricing/view/card/PricingCardView.jsx
- Added unique keys for JSONEditor components to ensure proper re-rendering based on channelId.
- Implemented input reset to clear previous JSON field values when the modal is opened.
Backend:
- Model: Add `icon` field to `model.Model` (gorm: varchar(128)); auto-migrated via GORM.
- Pricing API: Extend `model.Pricing` with `icon` and populate from model meta in `GetPricing()`.
Frontend:
- EditModelModal: Add `icon` input (with @lobehub/icons helper link); wire into init/load/submit flows.
- ModelHeader / PricingCardView: Prefer rendering `model.icon`; fallback to `vendor_icon`; final fallback to initials avatar.
- Models table: Add leading āIconā column, rendering `model.icon` or `vendor` icon via `getLobeHubIcon`.
Notes:
- Backward-compatible. Existing data without `icon` remain unaffected.
- No manual SQL needed; column is added by AutoMigrate.
Affected files:
- model/model_meta.go
- model/pricing.go
- web/src/components/table/models/modals/EditModelModal.jsx
- web/src/components/table/model-pricing/modal/components/ModelHeader.jsx
- web/src/components/table/model-pricing/view/card/PricingCardView.jsx
- web/src/components/table/models/ModelsColumnDefs.js
- Replace custom dots with Semi Badge types (success/danger/warning); add compact Progress bars
- Remove pie chart and related deps/config; move total key count and mode tags into the modal title
- Rework header using Row/Col; three equal stat cards (enabled/manual-disabled/auto-disabled)
- Integrate toolbar into Table title; wrap content with Card; use Tableās native empty state
- Make āEnable Allā conditional (hidden when all keys are enabled), mirroring āDisable Allā
- Unify numeric typography (current/total same size) for better readability
- Default page size set to 10; fallback to 10 when backend page_size is absent; page-size options: 10/20/50/100
- Cleanup imports and dead code (remove VChart and pie-spec logic)
- Minor spacing polish (extra bottom margin before table), no footer buttons
- 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
* 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.
* 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
- 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.
