Skip to content

feat: add multi-key management - #1497

Closed
Calcium-Ion wants to merge 160 commits into
mainfrom
multi-key-manage
Closed

feat: add multi-key management#1497
Calcium-Ion wants to merge 160 commits into
mainfrom
multi-key-manage

Conversation

@Calcium-Ion

@Calcium-Ion Calcium-Ion commented Aug 4, 2025

Copy link
Copy Markdown
Member

Summary by CodeRabbit

  • New Features

    • Added robust multi-key management for channels, including key status, enable/disable, and deletion operations.
    • Introduced support for Gemini API compatibility and conversion between Gemini and OpenAI formats.
    • Added a new video generation channel integration and corresponding task management endpoints.
    • Enhanced advanced channel settings with options for request passthrough and system prompts.
    • Added trusted partners section to the documentation.
  • Bug Fixes

    • Improved Unicode character counting in redemption name validation.
    • Fixed error handling and logging for various relay and channel operations.
  • Refactor

    • Unified error handling with retry and logging controls, and masked sensitive error information.
    • Streamlined key management and caching for multi-key channels.
    • Refactored request/response conversion logic for better compatibility across APIs.
  • Style

    • Added and enforced AGPLv3 license headers in source files.
    • Updated documentation and README formatting.
  • Chores

    • Updated ignore files to exclude lint caches.
    • Integrated ESLint tooling and configuration for code quality enforcement.
  • Documentation

    • Updated licensing policy to dual AGPLv3/commercial.
    • Added new partner logos and acknowledgments to project documentation.

QingyeSC and others added 30 commits July 16, 2025 18:00
优化claude messages接口启用思考时的参数设置
…ll layout

Summary
Implement a dedicated, reusable scrolling mechanism for all console-table pages while keeping header and sidebar fixed, plus related layout improvements.

Key Changes
• Added `.table-scroll-card` utility class
 – Provides flex column layout and internal vertical scrolling
 – Desktop height: `calc(100vh - 110px)`; Mobile (<768 px) height: `calc(100vh - 77px)`
 – Hides scrollbars cross-browser (`-ms-overflow-style`, `scrollbar-width`, `::-webkit-scrollbar`)
• Replaced global `.semi-card` scrolling rules with `.table-scroll-card` to avoid affecting non-table cards
• Updated table components (Channels, Tokens, Users, Logs, MjLogs, TaskLogs, Redemptions) to use the new class
• PageLayout
 – Footer is now suppressed for all `/console` routes
 – Confirmed only central content area scrolls; header & sidebar remain fixed
• Restored hidden scrollbar rules for `.semi-layout-content` and removed unnecessary global overrides
• Minor CSS cleanup & comment improvements for readability

Result
Console table pages now fill the viewport with smooth, internal scrolling and no visible scrollbars, while other cards and pages remain unaffected.
…anguage support

Add Semi UI internationalization to the project by wrapping the root
component tree with `LocaleProvider`. A new `SemiLocaleWrapper`
component maps the current `i18next` language code to the corresponding
Semi locale (currently `zh_CN` and `en_GB`) and falls back to Chinese
when no match is found.

Key changes
-----------
1. web/src/index.js
   • Import `LocaleProvider`, `useTranslation`, and Semi locale files.
   • Introduce `SemiLocaleWrapper` to determine `semiLocale` from
     `i18next.language` using a concise prefix-based mapping.
   • Wrap `PageLayout` with `SemiLocaleWrapper` inside the existing
     `ThemeProvider`.

2. Ensures that all Semi components automatically display the correct
   language when the app language is switched via i18next.

BREAKING CHANGE
---------------
Applications embedding this project must now ensure that `i18next`
initialization occurs before React render so that `LocaleProvider`
receives the correct initial language.
…ponents

Eliminated the manual `formatPageText` function that previously rendered
pagination text (e.g. “第 {{start}} - {{end}} 条,共 {{total}} 条”) in each
Table. Pagination now relies on the default Semi UI text or the global
i18n configuration, reducing duplication and making future language
updates centralized.

Why
---
* Keeps table components cleaner and more maintainable.
* Ensures pagination text automatically respects the app-wide i18n
  settings without per-component overrides.
1. Split monolithic `ChannelsTable` (2200+ LOC) into focused components
   • `channels/index.jsx` – composition entry
   • `ChannelsTable.jsx` – pure `<Table>` rendering
   • `ChannelsActions.jsx` – bulk & settings toolbar
   • `ChannelsFilters.jsx` – search / create / column-settings form
   • `ChannelsTabs.jsx` – type tabs
   • `ChannelsColumnDefs.js` – column definitions & render helpers
   • `modals/` – BatchTag, ColumnSelector, ModelTest modals

2. Extract domain hook
   • Moved `useChannelsData.js` → `src/hooks/channels/useChannelsData.js`
     – centralises state, API calls, pagination, filters, batch ops
     – now exports `setActivePage`, fixing tab / status switch errors

3. Update wiring
   • All sub-components consume data via `useChannelsData` props
   • Adjusted import paths after hook relocation

4. Clean legacy file
   • Legacy `components/table/ChannelsTable.js` now re-exports new module

5. Bug fixes
   • Tab switching, status filter & tag aggregation restored
   • Column selector & batch actions operate via unified hook

This commit completes the first phase of modularising the Channels feature, laying groundwork for consistent, maintainable table architecture across the app.
Refactor the monolithic LogsTable component (1453 lines) into a modular,
maintainable architecture following the channels table pattern.

## What Changed

### 🏗️ Architecture
- Split single large file into focused, single-responsibility components
- Introduced custom hook `useLogsData` for centralized state management
- Created dedicated column definitions file for better organization
- Implemented modal components for user interactions

### 📁 New Structure
```
web/src/components/table/usage-logs/
├── index.jsx                    # Main page component orchestrator
├── LogsTable.jsx               # Pure table rendering component
├── LogsActions.jsx             # Actions area (stats + compact mode)
├── LogsFilters.jsx             # Search form component
├── LogsColumnDefs.js           # Column definitions and renderers
└── modals/
    ├── ColumnSelectorModal.jsx # Column visibility settings
    └── UserInfoModal.jsx       # User information display

web/src/hooks/logs/
└── useLogsData.js              # Custom hook for state & logic
```

### 🎯 Key Improvements
- **Maintainability**: Clear separation of concerns, easier to understand
- **Reusability**: Modular components can be reused independently
- **Performance**: Optimized with `useMemo` for column rendering
- **Testing**: Single-responsibility components easier to test
- **Developer Experience**: Better code organization and readability

### 🔧 Technical Details
- Preserved all existing functionality and user experience
- Maintained backward compatibility through existing import path
- Centralized all business logic in `useLogsData` custom hook
- Extracted column definitions to separate module with render functions
- Split complex UI into focused components (table, actions, filters, modals)

### 🐛 Fixes
- Fixed Semi UI component import issues (`Typography.Paragraph`)
- Resolved module export dependencies
- Maintained consistent prop passing patterns

## Breaking Changes
None - all existing imports and functionality preserved.
Refactor the monolithic MjLogsTable component (971 lines) into a modular,
maintainable architecture following the same pattern as LogsTable refactor.

## What Changed

### 🏗️ Architecture
- Split large single file into focused, single-responsibility components
- Introduced custom hook `useMjLogsData` for centralized state management
- Created dedicated column definitions file for better organization
- Implemented specialized modal components for Midjourney-specific features

### 📁 New Structure
```
web/src/components/table/mj-logs/
├── index.jsx                    # Main page component orchestrator
├── MjLogsTable.jsx             # Pure table rendering component
├── MjLogsActions.jsx           # Actions area (banner + compact mode)
├── MjLogsFilters.jsx           # Search form component
├── MjLogsColumnDefs.js         # Column definitions and renderers
└── modals/
    ├── ColumnSelectorModal.jsx # Column visibility settings
    └── ContentModal.jsx        # Content viewer (text + image preview)

web/src/hooks/mj-logs/
└── useMjLogsData.js            # Custom hook for state & logic
```

### 🎯 Key Improvements
- **Maintainability**: Clear separation of concerns, easier to understand
- **Reusability**: Modular components can be reused independently
- **Performance**: Optimized with `useMemo` for column rendering
- **Testing**: Single-responsibility components easier to test
- **Developer Experience**: Better code organization and readability

### 🎨 Midjourney-Specific Features Preserved
- All task type rendering with icons (IMAGINE, UPSCALE, VARIATION, etc.)
- Status rendering with appropriate colors and icons
- Image preview functionality for generated artwork
- Progress indicators for task completion
- Admin-only columns for channel and submission results
- Banner notification system for callback settings

### 🔧 Technical Details
- Centralized all business logic in `useMjLogsData` custom hook
- Extracted comprehensive column definitions with Lucide React icons
- Split complex UI into focused components (table, actions, filters, modals)
- Maintained responsive design patterns for mobile compatibility
- Preserved admin permission handling for restricted features

### 🐛 Fixes
- Improved component prop passing patterns
- Enhanced type safety through better state management
- Optimized rendering performance with proper memoization

## Breaking Changes
None - all existing imports and functionality preserved.
…cture

Refactor the monolithic TaskLogsTable component (802 lines) into a modular,
maintainable architecture following the established pattern from LogsTable
and MjLogsTable refactors.

## What Changed

### 🏗️ Architecture
- Split large single file into focused, single-responsibility components
- Introduced custom hook `useTaskLogsData` for centralized state management
- Created dedicated column definitions file for better organization
- Implemented modal components for user interactions

### 📁 New Structure
```
web/src/components/table/task-logs/
├── index.jsx                       # Main page component orchestrator
├── TaskLogsTable.jsx              # Pure table rendering component
├── TaskLogsActions.jsx            # Actions area (task records + compact mode)
├── TaskLogsFilters.jsx            # Search form component
├── TaskLogsColumnDefs.js          # Column definitions and renderers
└── modals/
    ├── ColumnSelectorModal.jsx    # Column visibility settings
    └── ContentModal.jsx           # Content viewer for JSON data

web/src/hooks/task-logs/
└── useTaskLogsData.js             # Custom hook for state & logic
```

### 🎯 Key Improvements
- **Maintainability**: Clear separation of concerns, easier to understand
- **Reusability**: Modular components can be reused independently
- **Performance**: Optimized with `useMemo` for column rendering
- **Testing**: Single-responsibility components easier to test
- **Developer Experience**: Better code organization and readability

### 🎨 Task-Specific Features Preserved
- All task type rendering with icons (MUSIC, LYRICS, video generation)
- Platform-specific rendering (Suno, Kling, Jimeng) with distinct colors
- Progress indicators for task completion status
- Video preview links for successful video generation tasks
- Admin-only columns for channel information
- Status rendering with appropriate colors and icons

### 🔧 Technical Details
- Centralized all business logic in `useTaskLogsData` custom hook
- Extracted comprehensive column definitions with Lucide React icons
- Split complex UI into focused components (table, actions, filters, modals)
- Maintained responsive design patterns for mobile compatibility
- Preserved admin permission handling for restricted features
- Optimized spacing and layout (reduced gap from 4 to 2 for better density)

### 🎮 Platform Support
- **Suno**: Music and lyrics generation with music icons
- **Kling**: Video generation with video icons
- **Jimeng**: Video generation with distinct purple styling

### 🐛 Fixes
- Improved component prop passing patterns
- Enhanced type safety through better state management
- Optimized rendering performance with proper memoization
- Streamlined export pattern using `export { default }`

## Breaking Changes
None - all existing imports and functionality preserved.
…tecture

- Split monolithic 922-line TokensTable.js into modular components:
  * useTokensData.js: Custom hook for centralized state and logic management
  * TokensColumnDefs.js: Column definitions and rendering functions
  * TokensTable.jsx: Pure table component for rendering
  * TokensActions.jsx: Actions area (add, copy, delete tokens)
  * TokensFilters.jsx: Search form component with keyword and token filters
  * TokensDescription.jsx: Description area with compact mode toggle
  * index.jsx: Main orchestrator component

- Features preserved:
  * Token status management with switch controls
  * Quota progress bars and visual indicators
  * Model limitations display with vendor avatars
  * IP restrictions handling and display
  * Chat integrations with dropdown menu
  * Batch operations (copy, delete) with confirmations
  * Key visibility toggle and copy functionality
  * Compact mode for responsive layouts
  * Search and filtering capabilities
  * Pagination and loading states

- Improvements:
  * Better separation of concerns
  * Enhanced reusability and testability
  * Simplified maintenance and debugging
  * Consistent modular architecture pattern
  * Performance optimizations with useMemo
  * Backward compatibility maintained

This refactoring follows the same successful pattern used for LogsTable, MjLogsTable, and TaskLogsTable, significantly improving code maintainability while preserving all existing functionality.
…itecture

Refactor the monolithic RedemptionsTable component (614 lines) into a clean,
modular structure following the established tokens component pattern.

### Changes Made:

**New Components:**
- `RedemptionsColumnDefs.js` - Extract table column definitions and render logic
- `RedemptionsActions.jsx` - Extract action buttons (add, batch copy, clear invalid)
- `RedemptionsFilters.jsx` - Extract search and filter form components
- `RedemptionsDescription.jsx` - Extract description area component
- `redemptions/index.jsx` - Main container component managing state and composition

**New Hook:**
- `useRedemptionsData.js` - Extract all data management, CRUD operations, and business logic

**New Constants:**
- `redemption.constants.js` - Extract redemption status, actions, and form constants

**Architecture Changes:**
- Transform RedemptionsTable.jsx into pure table rendering component
- Move state management and component composition to index.jsx
- Implement consistent prop drilling pattern matching tokens module
- Add memoization for performance optimization
- Centralize translation function distribution

### Benefits:
- **Maintainability**: Each component has single responsibility
- **Reusability**: Components and hooks can be used elsewhere
- **Testability**: Individual modules can be unit tested
- **Team Collaboration**: Multiple developers can work on different modules
- **Consistency**: Follows established architectural patterns

### File Structure:
```
redemptions/
├── index.jsx                    # Main container (state + composition)
├── RedemptionsTable.jsx        # Pure table component
├── RedemptionsActions.jsx      # Action buttons
├── RedemptionsFilters.jsx      # Search/filter form
├── RedemptionsDescription.jsx  # Description area
└── RedemptionsColumnDefs.js    # Column definitions
…nt architecture

BREAKING CHANGE: Removed standalone user edit routes (/console/user/edit, /console/user/edit/:id)

- Decompose 673-line monolithic UsersTable.js into 8 specialized components
- Extract column definitions to UsersColumnDefs.js with render functions
- Create dedicated UsersActions.jsx for action buttons
- Create UsersFilters.jsx for search and filtering logic
- Create UsersDescription.jsx for description area
- Extract all data management logic to useUsersData.js hook
- Move AddUser.js and EditUser.js to users/modals/ folder as modal components
- Create 4 new confirmation modal components (Promote, Demote, EnableDisable, Delete)
- Implement pure UsersTable.jsx component for table rendering only
- Create main container component users/index.jsx to compose all subcomponents
- Update import paths in pages/User/index.js to use new modular structure
- Remove obsolete EditUser imports and routes from App.js
- Delete original monolithic files: UsersTable.js, AddUser.js, EditUser.js

The new architecture follows the same modular pattern as tokens and redemptions modules:
- Consistent file organization across all table modules
- Better separation of concerns and maintainability
- Enhanced reusability and testability
- Unified modal management approach

All existing functionality preserved with improved code organization.
BREAKING CHANGE: Removed standalone user edit routes and intermediate export files

## Major Refactoring
- Decompose 673-line monolithic UsersTable.js into 8 specialized components
- Extract column definitions to UsersColumnDefs.js with render functions
- Create dedicated UsersActions.jsx for action buttons
- Create UsersFilters.jsx for search and filtering logic
- Create UsersDescription.jsx for description area
- Extract all data management logic to useUsersData.js hook
- Move AddUser.js and EditUser.js to users/modals/ folder as modal components
- Create 4 new confirmation modal components (Promote, Demote, EnableDisable, Delete)
- Implement pure UsersTable.jsx component for table rendering only
- Create main container component users/index.jsx to compose all subcomponents

## Import Path Optimization
- Remove 6 intermediate re-export files: ChannelsTable.js, TokensTable.js, RedemptionsTable.js, UsageLogsTable.js, MjLogsTable.js, TaskLogsTable.js
- Update all pages to import directly from module folders (e.g., '../../components/table/tokens')
- Standardize naming convention: all pages import as XxxTable while internal components use XxxPage

## Route Cleanup
- Remove obsolete EditUser imports and routes from App.js (/console/user/edit, /console/user/edit/:id)
- Delete original monolithic files: UsersTable.js, AddUser.js, EditUser.js

## Architecture Benefits
- Unified modular pattern across all table modules (tokens, redemptions, users, channels, logs)
- Consistent file organization and naming conventions
- Better separation of concerns and maintainability
- Enhanced reusability and testability
- Eliminated unnecessary intermediate layers
- Improved import clarity and performance

All existing functionality preserved with significantly improved code organization.
Move EditChannel and EditTagModal from standalone pages to modal components
within the channels module structure for consistency with other table modules.

Changes:
- Move EditChannel.js → components/table/channels/modals/EditChannelModal.jsx
- Move EditTagModal.js → components/table/channels/modals/EditTagModal.jsx
- Update import paths in channels/index.jsx
- Remove standalone routes for EditChannel from App.js
- Delete original files from pages/Channel/

This change aligns the channels module with the established modular pattern
used by tokens, users, redemptions, and other table modules, centralizing
all channel management functionality within integrated modal components
instead of separate page routes.

BREAKING CHANGE: EditChannel standalone routes (/console/channel/edit/:id
and /console/channel/add) have been removed. All channel editing is now
handled through modal components within the main channels page.
Summary
-------
Introduce a reusable compact-mode toggle component and greatly improve the CardPro header for small screens.  Removes duplicated code, adds i18n support, and refines overall responsiveness.

Details
-------
🎨  UI / Components
• Create `common/ui/CompactModeToggle.js`
  – Provides a single source of truth for switching between “Compact list” and “Adaptive list”
  – Automatically hides itself on mobile devices via `useIsMobile()`

• Refactor table modules to use the new component
  – `Users`, `Tokens`, `Redemptions`, `Channels`, `TaskLogs`, `MjLogs`, `UsageLogs`
  – Deletes legacy in-file toggle buttons & reduces repetition

📱  CardPro improvements
• Hide `actionsArea` and `searchArea` on mobile, showing a single “Show Actions / Hide Actions” toggle button
• Add i18n: texts are now pulled from injected `t()` function (`显示操作项` / `隐藏操作项` etc.)
• Extend PropTypes to accept the `t` prop; supply a safe fallback
• Minor cleanup: remove legacy DOM observers & flag CSS, simplify logic

🔧  Integration
• Pass the `t` translation function to every `CardPro` usage across table pages
• Remove temporary custom class hooks after logic simplification

Benefits
--------
✓ Consistent, DRY compact-mode handling across the entire dashboard
✓ Better mobile experience with decluttered headers
✓ Full translation support for newly added strings
✓ Easier future maintenance (single compact toggle, unified CardPro API)
…ynamic skeletons & pagination

1. Add `web/src/components/common/ui/CardTable.js`
   • Renders Semi-UI `Table` on desktop; on mobile, transforms each row into a rounded `Card`.
   • Supports all standard `Table` props, including `rowSelection`, `scroll`, `pagination`, etc.
   • Adds mobile pagination via Semi-UI `Pagination`.
   • Implements a 500 ms minimum, active Skeleton loader that mimics real column layout (including operation-button row).

2. Replace legacy `Table` with `CardTable`
   • Updated all major data pages: Channels, MJ-Logs, Redemptions, Tokens, Task-Logs, Usage-Logs and Users.
   • Removed unused `Table` imports; kept behaviour on desktop unchanged.

3. UI polish
   • Right-aligned operation buttons and sensitive fields (e.g., token keys) inside mobile cards.
   • Improved Skeleton placeholders to better reflect actual UI hierarchy and preserve the active animation.

These changes dramatically improve the mobile experience while retaining full functionality on larger screens.
…ility on mobile

• Imported Semi-UI `Empty` component.
• Detect when `dataSource` is empty on mobile card view:
  – Renders supplied `empty` placeholder (`tableProps.empty`) or a default `<Empty description="No Data" />`.
  – Suppresses the mobile `Pagination` component to avoid blank pages.
• Pagination now renders only when `dataSource.length > 0`, preserving UX parity with desktop tables.
…order variable for consistent theming

Detailed changes
1. Removed `border-gray-200` Tailwind utility from two `<div>` elements in `web/src/components/common/ui/CardTable.js`.
2. Added inline style `borderColor: 'var(--semi-color-border)'` while keeping existing `border-b border-dashed` classes.
3. Ensures all borders use Semi UI’s design token, keeping visual consistency across light/dark themes and custom palettes.

Why
• Aligns component styling with Semi UI’s design system.
• Avoids hard-coded colors and prevents theme mismatch issues on future updates.

No breaking changes; visual update only.
• Added `.eslintrc.cjs`
  - Enables `header` + `react-hooks` plugins
  - Inserts standardized AGPL-3.0 license banner for © 2025 QuantumNous
  - JS/JSX parsing & JSX support configured

• Installed dev-deps: `eslint`, `eslint-plugin-header`, `eslint-plugin-react-hooks`

• Updated `web/package.json` scripts
  - `eslint` → lint with cache
  - `eslint:fix` → auto-insert/repair license headers

• Executed `eslint --fix` to prepend license banner to all JS/JSX files

• Ignored runtime cache
  - Added `.eslintcache` to `.gitignore` & `.dockerignore`

Result: consistent AGPL-3.0 license headers, reproducible linting across local dev & CI.
…-load RPM/TPM

This commit addresses an issue where RPM and TPM statistics did not load automatically on mobile devices.

Key changes
• Replaced conditional rendering with persistent rendering of `actionsArea` and `searchArea` in `CardPro` and applied the `hidden` CSS class when the sections should be concealed.
• Ensures internal hooks (e.g. `useUsageLogsData`) always run, allowing stats to be fetched without requiring the user to tap “Show Actions”.
• Maintains existing desktop behaviour; only mobile handling is affected.

Files updated
• `web/src/components/common/ui/CardPro.js`

Result
Mobile users now see up-to-date RPM/TPM (and other statistics) immediately after page load, improving usability and consistency with the desktop experience.
…correctly

Previously the component unmounted the Modal as soon as `showModelTestModal` became
false, preventing Semi UI from running its cleanup routine. This left `body`
stuck with `overflow: hidden`, disabling page scroll after the dialog closed.

Changes made
– Removed the early `return null` and always keep the Modal mounted; visibility
  is now controlled solely via the `visible` prop.
– Introduced a `hasChannel` guard to safely skip data processing/rendering when
  no channel is selected.
– Added defensive checks for table data, footer and title to avoid undefined
  access when the Modal is hidden.

This fix ensures that closing the test-model dialog correctly restores the
page’s scroll behaviour on both desktop and mobile.
• Accept an array for `actionsArea`, enabling multiple action blocks in one card
• Automatically insert a `Divider` between consecutive action blocks
• Add a `Divider` between `actionsArea` and `searchArea` when both exist
• Standardize `Divider` spacing by removing custom `margin` props
• Update `PropTypes`: `actionsArea` now supports `arrayOf(node)`

These changes improve visual separation and usability for complex table cards (e.g., Channels), making the UI cleaner and more consistent.
This patch standardises how all “model” (and related) `<Select>` components handle searching.

Highlights
• Added a shared helper `modelSelectFilter` to `helpers/utils.js` – performs case-insensitive  value-based matching, independent of ReactNode labels.
• Removed the temporary `helpers/selectFilter.js`; all components now import from the core helpers barrel.
• Updated Selects to use the new filter *and* set `autoClearSearchValue={false}` so the query text is preserved after a choice is made.

Affected components
• Channel editor (EditChannelModal) – channel type & model lists
• Tag editor (EditTagModal) – model list
• Token editor (EditTokenModal) – model-limit list
• Playground SettingsPanel – model selector

Benefits
✓ Consistent search behaviour across the app
✓ Better user experience when selecting multiple items
✓ Cleaner codebase with one canonical filter implementation
Provide a consistent UX by ensuring the status column tooltip is shown for all tokens, including those with unlimited quota.

Details:
• Removed early‐return that skipped tooltip rendering when `record.unlimited_quota` was true.
• Refactored tooltip content:
  – Unlimited quota: shows only “used quota”.
  – Limited quota: continues to show used, remaining (with percentage) and total.
• Leaves existing tag, switch and progress-bar behaviour unchanged.

This prevents missing hover information for unlimited tokens and avoids meaningless “remaining / total” figures (e.g. Infinity), improving clarity for administrators.
Summary
• Swapped out the obsolete `<Spin>` loader for a modern, animated Semi-UI `<Skeleton>` implementation in `UsageLogsActions.jsx`.

Details
1. Added animated Skeleton placeholders mirroring real Tag sizes (108 × 26, 65 × 26, 64 × 26).
2. Introduced `showSkeleton` state with 500 ms minimum display to eliminate flicker.
3. Leveraged existing `showStat` flag to decide when real data is ready.
4. Ensured only the three Tags are under loading state - `CompactModeToggle` renders immediately.
5. Adopted CardTable‐style `Skeleton` pattern (`loading` + `placeholder`) for consistency.
6. Removed all references to the original `Spin` component.

Outcome
A smoother and more consistent loading experience across devices, aligning UI behaviour with the project’s latest Skeleton standards.
Summary
1. CardTable
   • Added collapsible “Details / Collapse” section on mobile cards using Semi-UI Button + Collapsible with chevron icons.
   • Integrated i18n (`useTranslation`) for the toggle labels.
   • Restored original variable-width skeleton placeholders (50 % / 60 % / 70 % …) for more natural loading states.

2. UsageLogsColumnDefs
   • Wrapped each `Tag` inside a native `<span>` when used as Tooltip trigger, removing `findDOMNode` deprecation warnings in React StrictMode.

Impact
• Cleaner, shorter rows on small screens with optional expansion.
• Fully translated UI controls.
• No more console noise in development & CI caused by StrictMode warnings.
Calcium-Ion and others added 28 commits July 31, 2025 21:16
# Conflicts:
#	web/src/components/table/channels/modals/EditChannelModal.jsx
feat: add Claude Code channel support with OAuth integration
Revert "feat: add Claude Code channel support with OAuth integration"
…ge return value and optimizing response text handling
fix: correct Gemini channel model retrieval logic
@Calcium-Ion Calcium-Ion closed this Aug 4, 2025
@coderabbitai

coderabbitai Bot commented Aug 4, 2025

Copy link
Copy Markdown
Contributor

Caution

Review failed

The pull request is closed.

Walkthrough

This update introduces extensive enhancements across the codebase, focusing on multi-key channel management, Gemini/OpenAI compatibility, error handling, and new video channel integration. Key changes include robust multi-key lifecycle APIs, unified Gemini/OpenAI request/response conversion, improved error metadata and masking, new Vidu video channel support, and expanded pass-through and override mechanisms for request payloads. Numerous adaptors, DTOs, and handlers are updated for these features.

Changes

Cohort / File(s) Change Summary
Multi-Key Channel Management
controller/channel.go, model/channel.go, model/channel_cache.go, router/api-router.go
Added APIs and logic for multi-key channel lifecycle: status, enable/disable, delete, append/replace keys; extended channel info with disable reasons/times; cache and update logic adjusted for multi-key support.
Gemini/OpenAI Compatibility & Conversion
relay/channel/gemini/adaptor.go, relay/channel/gemini/relay-gemini.go, relay/gemini_handler.go, dto/gemini.go, service/convert.go, relay/channel/openai/adaptor.go, relay/channel/openai/helper.go, relay/channel/openai/relay-openai.go
Unified Gemini and OpenAI request/response types via dto package; implemented conversion functions; expanded streaming and image handling; added/updated ConvertGeminiRequest methods in adaptors; improved streaming format handlers.
Error Handling & Masking
types/error.go, controller/relay.go, relay/relay-text.go, relay/audio_handler.go, relay/embedding_handler.go, relay/image_handler.go, relay/rerank_handler.go, relay/responses_handler.go, relay/websocket.go, relay/channel/ali/*, relay/channel/baidu/*, relay/channel/jimeng/image.go, relay/channel/mokaai/adaptor.go, service/channel.go, service/error.go
Enhanced error struct with retry/log flags, masking, and flexible constructors; standardized error returns with status codes; improved error logging and skip-retry logic throughout relay and controller layers.
Video Channel Integration (Vidu)
relay/channel/task/vidu/adaptor.go, constant/channel.go, controller/channel-test.go, relay/relay_adaptor.go, relay/relay_task.go
Added full adaptor for Vidu video channel: request/response structs, task submission and status, JWT handling; registered channel type and base URL; updated channel test and relay logic for new channel.
DTO & Response Refactoring
dto/openai_request.go, dto/openai_response.go, dto/claude.go, dto/channel_settings.go, common/str.go
Refactored DTOs for flexible error fields, added error extraction methods, masked sensitive info; extended channel settings; added sensitive info masking utility.
Pass-Through & Override Enhancements
relay/image_handler.go, relay/claude_handler.go, relay/rerank_handler.go, relay/gemini_handler.go
Added/expanded support for pass-through request body mode and dynamic parameter overrides, controlled by global/channel settings, in image, Claude, rerank, and Gemini handlers.
Task Adaptor Refactoring
relay/channel/task/kling/adaptor.go, relay/constant/relay_mode.go, controller/task.go, relay/relay_adaptor.go, constant/task.go
Unified task platform handling, removed Kling/Jimeng constants, refactored task adaptor key handling and JWT logic, generalized video fetch/submit relay modes.
Gemini Adaptors & Related Stubs
relay/channel/*/adaptor.go (many files)
Added stub or implemented ConvertGeminiRequest methods to all relay adaptors for future Gemini support; some adaptors delegate or implement conversion logic.
Streaming & Usage Calculation Improvements
relay/channel/gemini/relay-gemini-native.go, relay/channel/openai/helper.go, relay/helper/common.go, relay/helper/stream_scanner.go
Improved streaming response handling, added empty start chunk, better "[DONE]" handling, and usage calculation for Gemini and OpenAI streaming.
Miscellaneous & Infrastructure
.dockerignore, .gitignore, LICENSE, README.md, README.en.md, web/.eslintrc.cjs, web/package.json, web/postcss.config.js, web/src/App.js, web/src/components/auth/LoginForm.js, setting/operation_setting/tools.go, setting/rate_limit.go, middleware/auth.go, middleware/distributor.go, middleware/kling_adapter.go, common/custom-event.go, common/page_info.go, controller/playground.go, controller/redemption.go, controller/swag_video.go, controller/task_video.go, i18n/zh-cn.json, model/ability.go, relay/channel/ollama/adaptor.go, relay/channel/ollama/relay-ollama.go, relay/channel/ollama/dto.go, relay/channel/vertex/adaptor.go, relay/channel/vertex/service_account.go, router/video-router.go
Added/updated ignore files, dual licensing, partner sections, ESLint configs, copyright headers, new translation keys, minor bug fixes, and small refactors.

Sequence Diagram(s)

sequenceDiagram
    participant Admin as Admin User
    participant API as API Server
    participant DB as Database

    Admin->>API: POST /channel/multi_key/manage (action)
    API->>DB: Fetch Channel by ID
    API->>API: Validate action & channel multi-key mode
    alt get_key_status
        API->>DB: Read channel info, keys, status
        API->>Admin: Return paginated key status
    else disable_key/enable_key
        API->>DB: Update key status, reason, time
        API->>DB: Save & refresh cache
        API->>Admin: Return updated status
    else delete_disabled_keys
        API->>DB: Remove auto-disabled keys
        API->>DB: Save & refresh cache
        API->>Admin: Return updated status
    end
Loading
sequenceDiagram
    participant User as User
    participant API as API Server
    participant Gemini as Gemini Upstream
    participant OpenAI as OpenAI Upstream

    User->>API: Gemini-style request
    API->>API: Convert Gemini request to OpenAI format
    API->>OpenAI: Send OpenAI-formatted request
    OpenAI-->>API: OpenAI response
    API->>API: Convert OpenAI response to Gemini format
    API-->>User: Gemini-style response
Loading

Estimated code review effort

🎯 5 (Critical) | ⏱️ ~90+ minutes

Possibly related PRs

  • QuantumNous/new-api#1441: Adds the same PassThroughBodyEnabled and SystemPrompt fields to channel settings, directly related to passthrough and prompt features in this PR.
  • QuantumNous/new-api#1360: Extensively modifies multi-key channel support, error handling, and unifies error types, overlapping with this PR's multi-key and error refactors.
  • QuantumNous/new-api#1484: Refactors Gemini request conversion and type usage, directly related to this PR's Gemini/OpenAI compatibility and adaptor changes.

Poem

In code’s bright warren, rabbits hop with glee,
Multi-key magic and Gemini’s spree!
Errors now masked, no secrets to show,
Vidu’s new channel lets videos flow.
With linting in tow and partners in sight,
This patch makes the codebase hop with delight!
( ˘ ³˘)♥ 🐇✨

Note

⚡️ Unit Test Generation is now available in beta!

Learn more here, or try it out under "Finishing Touches" below.

✨ Finishing Touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch multi-key-manage

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai generate unit tests to generate unit tests for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.