t0ng7u 1bc0010f5c 🎨 feat: Implement responsive design for SelectableButtonGroup component
This commit introduces a comprehensive responsive design system for the SelectableButtonGroup component that adapts to container width changes, particularly optimized for dynamic sidebar layouts.

## Key Features

### 1. Container Width Detection
- Added `useContainerWidth` hook using ResizeObserver API
- Real-time container width monitoring for responsive calculations
- Automatic layout adjustments based on available space

### 2. Intelligent Column Layout
Implements a 4-tier responsive system:
- **≤280px**: 1 column + tags (mobile portrait)
- **281-380px**: 2 columns + tags (narrow screens)
- **381-460px**: 3 columns - tags (general case, prioritizes readability)
- **>460px**: 3 columns + tags (wide screens, full feature display)

### 3. Dynamic Tag Visibility
- Tags automatically hide in medium-width containers (381-460px) to improve text readability
- Tags show in narrow and wide containers where space allows for optimal UX
- Responsive threshold ensures content clarity across all viewport sizes

### 4. Adaptive Grid Spacing
- Compact spacing `[4,4]` for containers ≤400px
- Standard spacing `[6,6]` for larger containers
- Additional `.sbg-compact` CSS class for fine-tuned styling in narrow layouts

### 5. Sidebar Integration
- Perfectly compatible with dynamic sidebar width: `clamp(280px, 24vw, 520px)`
- Automatically adjusts as sidebar scales with viewport changes
- Maintains optimal button density and information display at all sizes

## Technical Implementation

- **Hook**: `useContainerWidth.js` - ResizeObserver-based width detection
- **Component**: Enhanced `SelectableButtonGroup.jsx` with responsive logic
- **Styling**: Added `.sbg-compact` mode in `index.css`
- **Performance**: Efficient span calculation using `Math.floor(24 / perRow)`

## Benefits

- Improved UX across all screen sizes and sidebar configurations
- Better text readability through intelligent tag hiding
- Seamless integration with existing responsive sidebar system
- Maintains component functionality while optimizing space utilization

Closes: Responsive design implementation for model marketplace sidebar components
2025-08-29 17:05:49 +08:00
2025-08-19 01:44:44 +08:00
2025-08-27 01:30:01 +08:00
2025-06-09 14:57:01 +08:00
2023-06-22 11:37:44 +08:00
2025-08-21 12:49:56 +08:00
2025-08-21 12:49:56 +08:00
2023-06-02 14:20:40 +08:00

中文 | English

new-api

New API

🍥 Next-Generation Large Model Gateway and AI Asset Management System

Calcium-Ion%2Fnew-api | Trendshift

license release docker docker GoReportCard

📝 Project Description

Note

This is an open-source project developed based on One API

Important

🤝 Trusted Partners

 

No particular order

Cherry Studio Peking University UCloud Alibaba Cloud IO.NET

 

📚 Documentation

For detailed documentation, please visit our official Wiki: https://docs.newapi.pro/

You can also access the AI-generated DeepWiki: Ask DeepWiki

Key Features

New API offers a wide range of features, please refer to Features Introduction for details:

  1. 🎨 Brand new UI interface
  2. 🌍 Multi-language support
  3. 💰 Online recharge functionality (YiPay)
  4. 🔍 Support for querying usage quotas with keys (works with neko-api-key-tool)
  5. 🔄 Compatible with the original One API database
  6. 💵 Support for pay-per-use model pricing
  7. ⚖️ Support for weighted random channel selection
  8. 📈 Data dashboard (console)
  9. 🔒 Token grouping and model restrictions
  10. 🤖 Support for more authorization login methods (LinuxDO, Telegram, OIDC)
  11. 🔄 Support for Rerank models (Cohere and Jina), API Documentation
  12. Support for OpenAI Realtime API (including Azure channels), API Documentation
  13. Support for Claude Messages format, API Documentation
  14. Support for entering chat interface via /chat2link route
  15. 🧠 Support for setting reasoning effort through model name suffixes:
    1. OpenAI o-series models
      • Add -high suffix for high reasoning effort (e.g.: o3-mini-high)
      • Add -medium suffix for medium reasoning effort (e.g.: o3-mini-medium)
      • Add -low suffix for low reasoning effort (e.g.: o3-mini-low)
    2. Claude thinking models
      • Add -thinking suffix to enable thinking mode (e.g.: claude-3-7-sonnet-20250219-thinking)
  16. 🔄 Thinking-to-content functionality
  17. 🔄 Model rate limiting for users
  18. 💰 Cache billing support, which allows billing at a set ratio when cache is hit:
    1. Set the Prompt Cache Ratio option in System Settings-Operation Settings
    2. Set Prompt Cache Ratio in the channel, range 0-1, e.g., setting to 0.5 means billing at 50% when cache is hit
    3. Supported channels:
      • OpenAI
      • Azure
      • DeepSeek
      • Claude

Model Support

This version supports multiple models, please refer to API Documentation-Relay Interface for details:

  1. Third-party models gpts (gpt-4-gizmo-*)
  2. Third-party channel Midjourney-Proxy(Plus) interface, API Documentation
  3. Third-party channel Suno API interface, API Documentation
  4. Custom channels, supporting full call address input
  5. Rerank models (Cohere and Jina), API Documentation
  6. Claude Messages format, API Documentation
  7. Dify, currently only supports chatflow

Environment Variable Configuration

For detailed configuration instructions, please refer to Installation Guide-Environment Variables Configuration:

  • GENERATE_DEFAULT_TOKEN: Whether to generate initial tokens for newly registered users, default is false
  • STREAMING_TIMEOUT: Streaming response timeout, default is 300 seconds
  • DIFY_DEBUG: Whether to output workflow and node information for Dify channels, default is true
  • FORCE_STREAM_OPTION: Whether to override client stream_options parameter, default is true
  • GET_MEDIA_TOKEN: Whether to count image tokens, default is true
  • GET_MEDIA_TOKEN_NOT_STREAM: Whether to count image tokens in non-streaming cases, default is true
  • UPDATE_TASK: Whether to update asynchronous tasks (Midjourney, Suno), default is true
  • COHERE_SAFETY_SETTING: Cohere model safety settings, options are NONE, CONTEXTUAL, STRICT, default is NONE
  • GEMINI_VISION_MAX_IMAGE_NUM: Maximum number of images for Gemini models, default is 16
  • MAX_FILE_DOWNLOAD_MB: Maximum file download size in MB, default is 20
  • CRYPTO_SECRET: Encryption key used for encrypting database content
  • AZURE_DEFAULT_API_VERSION: Azure channel default API version, default is 2025-04-01-preview
  • NOTIFICATION_LIMIT_DURATION_MINUTE: Notification limit duration, default is 10 minutes
  • NOTIFY_LIMIT_COUNT: Maximum number of user notifications within the specified duration, default is 2
  • ERROR_LOG_ENABLED=true: Whether to record and display error logs, default is false

Deployment

For detailed deployment guides, please refer to Installation Guide-Deployment Methods:

Tip

Latest Docker image: calciumion/new-api:latest

Multi-machine Deployment Considerations

  • Environment variable SESSION_SECRET must be set, otherwise login status will be inconsistent across multiple machines
  • If sharing Redis, CRYPTO_SECRET must be set, otherwise Redis content cannot be accessed across multiple machines

Deployment Requirements

  • Local database (default): SQLite (Docker deployment must mount the /data directory)
  • Remote database: MySQL version >= 5.7.8, PgSQL version >= 9.6

Deployment Methods

Using BaoTa Panel Docker Feature

Install BaoTa Panel (version 9.2.0 or above), find New-API in the application store and install it. Tutorial with images

# Download the project
git clone https://github.com/Calcium-Ion/new-api.git
cd new-api
# Edit docker-compose.yml as needed
# Start
docker-compose up -d

Using Docker Image Directly

# Using SQLite
docker run --name new-api -d --restart always -p 3000:3000 -e TZ=Asia/Shanghai -v /home/ubuntu/data/new-api:/data calciumion/new-api:latest

# Using MySQL
docker run --name new-api -d --restart always -p 3000:3000 -e SQL_DSN="root:123456@tcp(localhost:3306)/oneapi" -e TZ=Asia/Shanghai -v /home/ubuntu/data/new-api:/data calciumion/new-api:latest

Channel Retry and Cache

Channel retry functionality has been implemented, you can set the number of retries in Settings->Operation Settings->General Settings. It is recommended to enable caching.

Cache Configuration Method

  1. REDIS_CONN_STRING: Set Redis as cache
  2. MEMORY_CACHE_ENABLED: Enable memory cache (no need to set manually if Redis is set)

API Documentation

For detailed API documentation, please refer to API Documentation:

Other projects based on New API:

  • new-api-horizon: High-performance optimized version of New API
  • VoAPI: Frontend beautified version based on New API

Help and Support

If you have any questions, please refer to Help and Support:

🌟 Star History

Star History Chart

Description
模型生成用
Readme AGPL-3.0 23 MiB
Languages
Go 51.9%
JavaScript 47.9%
CSS 0.1%