QuentinHsu 966af88ec3 feat(playground): improve Playground chat experience and Markdown rendering (#5217)
* refactor(playground): streamline chat request state

- extract conversation actions from the page component to keep message flow logic reusable.
- unify streaming and non-streaming generation state, including abort support for non-stream requests.
- simplify message rendering and payload construction while localizing Playground prompts.

* fix(playground): validate persisted chat state

- wrap saved Playground state with a storage version while still reading legacy values.

- validate config, parameter toggles, and messages before restoring them from localStorage.

- cap stored chat history to the latest messages to avoid oversized or stale state.

* refactor(playground): centralize message content access

- route chat rendering, copy actions, and error display through shared message helpers.

- reuse the current-version update helper for non-streaming assistant responses.

- keep message version details behind utility functions to reduce future model churn.

* refactor(playground): split storage schemas

- move Playground storage validation schemas into a dedicated module.

- keep storage read and write logic focused on migration, trimming, and persistence.

- preserve the existing storage envelope and validation behavior.

* refactor(playground): extract options loading hook

- move model and group queries into a dedicated hook so the page component stays focused on layout wiring.
- preserve existing fallback selection and error toast behavior while reusing the hook through the playground barrel export.

* refactor(playground): extract prompt suggestions

- move static prompt suggestion rendering into a focused component so the input stays centered on compose controls.
- preserve translated suggestion submission behavior while isolating icon metadata from the input form.

* refactor(playground): extract input tools

- move attachment and search controls into a dedicated component so the prompt input stays focused on compose state.
- keep existing development toast behavior and disabled handling while centralizing tool metadata.

* refactor(playground): extract input controls

- move model, group, send, and stop controls into a focused component so the input only manages compose state.
- preserve existing disabled states and generation button behavior while isolating control rendering.

* refactor(playground): extract message content display

- move sources, reasoning, loading, error, and response rendering into a dedicated message content component.
- keep the chat list focused on message iteration, edit state, and action wiring without changing display behavior.

* refactor(playground): extract message editor

- move inline message editing controls into a dedicated editor component so the chat list stays focused on rendering flow.
- preserve save, save-and-submit, cancel, and disabled-state behavior for edited messages.

* refactor(playground): extract stream error parsing

- move SSE error payload parsing into a reusable stream utility so the request hook stays focused on lifecycle handling.
- preserve existing error message, error code, and fallback behavior for raw or empty stream errors.

* refactor(playground): extract request error parsing

- move non-stream request error extraction into a shared utility so the chat handler stays focused on request flow.
- preserve the existing response message, error code, and fallback priority for failed chat completions.

* refactor(playground): extract streaming chunk updates

- move reasoning and content chunk application into a message utility so the chat handler only wires stream events.
- preserve error-state skipping, reasoning accumulation, and content streaming behavior for assistant messages.

* refactor(playground): extract message reasoning parser

- move think tag parsing into a dedicated playground message utility.
- export the parser through the shared playground lib barrel for consistent imports.

* refactor(playground): extract message streaming utilities

- move stream chunk application and message finalization into a dedicated utility.
- keep stored message sanitization with the streaming lifecycle helpers.

* refactor(playground): extract message update utilities

- move assistant message update helpers into a focused playground utility.
- keep error-state message updates separate from core message construction helpers.

* refactor(playground): extract completion choice handling

- move non-streaming choice application into the message streaming utilities.
- keep the chat handler focused on request orchestration and message updates.

* refactor(playground): centralize assistant completion state

- add a helper for finalizing assistant messages with complete status.
- reuse the helper in stream completion and stop-generation paths.

* refactor(playground): extract stream message parsing

- move SSE delta parsing into a shared stream utility.
- keep the stream request hook focused on lifecycle handling and update dispatch.

* refactor(playground): extract stream ready state checks

- move SSE ready-state status handling into stream utilities.
- keep weak source status typing outside the stream request hook.

* refactor(playground): extract conversation message helpers

- move send, regenerate, and edit message list construction into focused utilities.
- keep the conversation hook focused on edit state and update dispatch.

* refactor(playground): extract state initialization helpers

- move playground initial state loading into focused utility helpers.
- centralize message state updater resolution outside the React state hook.

* refactor(playground): extract option fallback helpers

- move model and group fallback selection into focused playground utilities.
- keep the options hook focused on query results, toasts, and config updates.

* refactor(playground): extract message action helpers

- move message action state derivation into focused utilities.

- keep the action component focused on guarded handlers and rendering.

* refactor(playground): extract input control state

- move submit, stop, and selector state derivation into a pure helper.

- keep input controls focused on rendering model selectors and action buttons.

* refactor(playground): extract message content state

- move source, reasoning, loader, and body visibility checks into a pure helper.

- use a discriminated state shape so rendered reasoning content stays type-safe.

* refactor(playground): extract message editor state

- move save eligibility and submit visibility checks into a pure helper.

- keep the editor component focused on textarea and button rendering.

* refactor(playground): extract message error state

- move error kind, fallback content, and admin visibility checks into a pure helper.

- centralize the model pricing settings path used by the error action.

* refactor(playground): extract chat render state

- move editing content lookup and per-message render flags into conversation helpers.

- keep the chat component focused on mapping messages to editor and content views.

* refactor(playground): extract suggestion display state

- move suggestion class selection into a pure helper.

- keep the suggestions component focused on translation and rendering.

* refactor(playground): extract assistant message state checks

- move final and pending assistant status checks into streaming utilities.

- keep the chat handler focused on request lifecycle updates.

* refactor(playground): extract input tool state

- move attachment action metadata and development notices into input tool utilities.

- keep the input tools component focused on menu and button rendering.

* refactor(playground): extract stream protocol checks

- move SSE done-message and closed-ready-state checks into stream utilities.

- keep the stream request hook focused on event handling flow.

* refactor(playground): extract message removal helper

- move delete-message filtering into conversation message utilities.

- keep the conversation hook focused on action orchestration.

* refactor(playground): extract option error messages

- move option load error message selection into playground option utilities
- keep the options hook focused on query effects and fallback updates

* refactor(playground): extract input submit text helper

- move prompt submit text validation into input control utilities
- let the input component submit only when a concrete text value is available

* refactor(playground): centralize error message checks

- add a shared helper for identifying error messages
- remove direct status string checks from message content rendering

* refactor(playground): extract message content display checks

- move loader and content visibility decisions into local helper functions
- keep message content state assembly focused on composing render state

* refactor(playground): replace raw message role checks

- use shared message role constants in conversation edit handling
- avoid raw assistant role literals when validating API messages

* refactor(playground): extract non-stream response handling

- move chat completion response choice handling into message streaming utilities
- keep the chat handler focused on request lifecycle and error routing

* refactor(playground): centralize stream cleanup

- reuse one stream cleanup path for completion, errors, startup failures, and manual stops
- preserve the current-source guard when closing SSE streams

* refactor(playground): extract pending assistant check

- centralize pending assistant message detection in streaming utilities
- reuse the helper when sanitizing stored playground messages

* perf(playground): improve mobile input controls

- split mobile input controls into selector and action rows
- keep the desktop input footer compact while reducing mobile control crowding

* perf(playground): add starter empty state

- show starter prompts in the empty playground chat area
- wire empty-state prompt selection into the existing send flow
- add localized copy for the new empty state

* perf(playground): improve mobile message actions

- collapse mobile message actions into a touch-friendly dropdown menu
- keep the desktop hover action strip unchanged for pointer workflows
- share one action list between desktop buttons and the mobile menu

* perf(playground): add error recovery actions

- show retry, edit, and delete actions inside error message alerts
- route edit recovery to the previous user prompt when available
- keep recovery controls touch-friendly on mobile layouts

* perf(playground): refine message editing experience

- present message edits in a focused bordered editor panel
- add unsaved-change state, reset, and cancel confirmation flows
- improve mobile touch targets and keyboard shortcuts for editing

* perf(playground): improve markdown code blocks

- render fenced markdown code with syntax highlighting, line numbers, and fallback plain text
- add copy, download, and collapse controls for playground AI responses
- tighten code block layout and theme token styles for responsive markdown rendering

* fix(playground): constrain markdown code block height

- collapse long playground code blocks after a short preview instead of waiting for very large snippets
- cap expanded code blocks so long responses scroll inside the code block
- keep generic code block usage unconstrained unless a caller opts in

* feat(playground): add chat history clearing

- add a toolbar action that is enabled only when saved playground messages exist.
- confirm destructive clears before removing browser-stored conversation state.
- add localized strings for the action, dialog, and completion toast.

* perf(playground): improve chat markdown rendering

- refine assistant and user message surfaces so chat content matches the app UI.
- normalize markdown typography, tables, images, lists, blockquotes, and details rendering.
- add indentation cues for collapsible reasoning and source sections.

* style: format code block component

* style: format playground frontend files

* feat(playground): render markdown with stream parser

- replace Streamdown with stream-markdown-parser for project-owned markdown rendering and styling.
- split response rendering into focused block, inline, table, alert, details, and footnote modules.
- pass message final state into response parsing so streaming content can be parsed incrementally.

* fix(playground): localize reasoning and chat feedback

- translate reasoning status, message actions, playground errors, and response renderer fallbacks across supported locales.
- keep reasoning duration numeric and tighten the collapsible layout to prevent trigger jitter.
- register dynamic keys so i18n sync keeps runtime labels covered.

* refactor(playground): group files by functional area

- move chat, input, and message components into focused subdirectories to make the UI structure easier to scan.
- split playground helpers into input, message, streaming, storage, options, state, and suggestions modules.
- update barrel exports and imports so existing feature entry points continue to work.

* fix(playground): prevent history replay from freezing page

- defer saved conversation loading so route entry no longer blocks on localStorage parsing and markdown rendering.
- limit initial history rendering and skip expensive markdown parsing for oversized responses.
- normalize corrupted streaming snapshots and cumulative chunks to keep saved playground history bounded.
- add message timing metadata and layout alignment groundwork without introducing live timers.

* feat(playground): allow regenerating from user messages

- show regenerate actions on user messages with saved content.
- truncate following conversation state before starting a fresh assistant response.

* feat(playground): add raw response source view

- add a per-message source toggle for assistant responses.
- render raw response content with the existing code block viewer.
- localize the new source and preview action labels.

* feat(playground): render code with unified editor

- replace Shiki HTML rendering with a read-only CodeMirror view for code blocks and raw responses.
- reuse the same CodeMirror frame for message editing so source and edit modes stay visually aligned.
- add lightweight CodeMirror dependencies while keeping language support scoped to Markdown.

* perf(playground): streamline chat input controls

- combine model and group selection into one compact picker for faster context switching.
- switch playground action buttons to icon-first controls with tooltips to reduce toolbar width.
- refresh input footer styling and submit states so active and destructive actions are clearer.
- bump dompurify lockfile entry to keep the frontend dependency current.

* fix(playground): filter models by selected group

- query user models by the selected playground group instead of reusing the cross-group model union.
- clear unavailable model selections and block sending when the active group has no models.
- align model selector and error action controls with the existing playground interaction style.

* perf(playground): remove input suggestion chips

- remove the prompt suggestion row below the playground input to reduce visual noise.
- delete the now-unused suggestion component and display helper.

* perf(playground): stabilize reasoning trigger layout

- use fixed icon slots around the reasoning label so the left content stays still when toggling.
- limit the open state animation to the chevron rotation for a smoother collapse interaction.

* perf(playground): smooth reasoning expansion

- use the collapsible panel height animation for vertical reasoning reveals.
- sync inner content opacity and position with the panel state.
2026-06-27 17:23:25 +08:00
2026-06-27 12:42:54 +08:00
2026-02-25 14:55:33 +08:00
2026-06-27 17:01:59 +08:00
2026-06-27 17:01:59 +08:00
2026-01-26 20:24:28 +08:00
2026-06-27 17:01:59 +08:00
2026-05-12 21:53:54 +08:00
2026-05-12 21:53:54 +08:00
2026-05-12 21:53:54 +08:00
2023-06-02 14:20:40 +08:00

new-api

New API

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

中文 | English | Français | 日本語

license release docker docker GoReportCard

Calcium-Ion%2Fnew-api | Trendshift

Quick StartKey FeaturesDeploymentDocumentationHelp

📝 Project Description

Note

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

Important

  • This project is intended solely for lawful and authorized AI API gateway, organization-level authentication, multi-model management, usage analytics, cost accounting, and private deployment scenarios.
  • Users must lawfully obtain upstream API keys, accounts, model services, and interface permissions, and must comply with upstream terms of service and applicable laws and regulations.
  • Users should ensure their use complies with upstream terms of service and applicable laws and regulations.
  • When providing generative AI services to the public, users should comply with applicable regulatory requirements and fulfill all filing, licensing, content safety, real-name verification, log retention, tax, and upstream authorization obligations required by their jurisdiction.

🤝 Trusted Partners

No particular order

Cherry Studio Peking University UCloud Alibaba Cloud IO.NET


🙏 Special Thanks

JetBrains Logo

Thanks to JetBrains for providing free open-source development license for this project


🚀 Quick Start

# Clone the project
git clone https://github.com/QuantumNous/new-api.git
cd new-api

# Edit docker-compose.yml configuration
nano docker-compose.yml

# Start the service
docker-compose up -d
Using Docker Commands
# Pull the latest image
docker pull calciumion/new-api:latest

# Using SQLite (default)
docker run --name new-api -d --restart always \
  -p 3000:3000 \
  -e TZ=Asia/Shanghai \
  -v ./data:/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 ./data:/data \
  calciumion/new-api:latest

💡 Tip: -v ./data:/data will save data in the data folder of the current directory, you can also change it to an absolute path like -v /your/custom/path:/data


🎉 After deployment is complete, visit http://localhost:3000 to start using!

Warning

When operating this project as a public generative AI service or API resale service, users should first complete all required filing, licensing, content safety, real-name verification, log retention, tax, payment, and upstream authorization obligations.

📖 For more deployment methods, please refer to Deployment Guide


📚 Documentation

Quick Navigation:

Category Link
🚀 Deployment Guide Installation Documentation
⚙️ Environment Configuration Environment Variables
📡 API Documentation API Documentation
FAQ FAQ
💬 Community Interaction Communication Channels

Key Features

For detailed features, please refer to Features Introduction

🎨 Core Functions

Feature Description
🎨 New UI Modern user interface design
🌍 Multi-language Supports Chinese, English, French, Japanese
🔄 Data Compatibility Fully compatible with the original One API database
📈 Data Dashboard Visual console and statistical analysis
🔒 Permission Management Token grouping, model restrictions, user management

💰 Authorized Usage Accounting and Billing

  • Internal top-up and quota allocation for lawful authorized scenarios (EPay, Stripe)
  • Organization-level per-request, usage-based, and cache-hit cost accounting
  • Cache billing statistics for OpenAI, Azure, DeepSeek, Claude, Qwen, and supported models
  • Flexible billing policies for internal management or authorized enterprise customers

🔐 Authorization and Security

  • 😈 Discord authorization login
  • 🤖 LinuxDO authorization login
  • 📱 Telegram authorization login
  • 🔑 OIDC unified authentication

🚀 Advanced Features

API Format Support:

Intelligent Routing:

  • ⚖️ Channel weighted random
  • 🔄 Automatic retry on failure
  • 🚦 User-level model rate limiting

Format Conversion:

  • 🔄 OpenAI Compatible ⇄ Claude Messages
  • 🔄 OpenAI Compatible → Google Gemini
  • 🔄 Google Gemini → OpenAI Compatible - Text only, function calling not supported yet
  • 🚧 OpenAI Compatible ⇄ OpenAI Responses - In development
  • 🔄 Thinking-to-content functionality

Reasoning Effort Support:

View detailed configuration

OpenAI series models:

  • o3-mini-high - High reasoning effort
  • o3-mini-medium - Medium reasoning effort
  • o3-mini-low - Low reasoning effort
  • gpt-5-high - High reasoning effort
  • gpt-5-medium - Medium reasoning effort
  • gpt-5-low - Low reasoning effort

Claude thinking models:

  • claude-3-7-sonnet-20250219-thinking - Enable thinking mode

Google Gemini series models:

  • gemini-2.5-flash-thinking - Enable thinking mode
  • gemini-2.5-flash-nothinking - Disable thinking mode
  • gemini-2.5-pro-thinking - Enable thinking mode
  • gemini-2.5-pro-thinking-128 - Enable thinking mode with thinking budget of 128 tokens
  • You can also append -low, -medium, or -high to any Gemini model name to request the corresponding reasoning effort (no extra thinking-budget suffix needed).

🤖 Model Support

For details, please refer to API Documentation - Gateway Interface

Model Type Description Documentation
🤖 OpenAI GPTs gpt-4-gizmo-* series -
🎨 Midjourney-Proxy Midjourney-Proxy(Plus) Documentation
🎵 Suno-API Suno API Documentation
🔄 Rerank Cohere, Jina Documentation
💬 Claude Messages format Documentation
🌐 Gemini Google Gemini format Documentation
🔧 Dify ChatFlow mode -
🎯 Custom upstream Supports configuring legally authorized upstream endpoints -

📡 Supported Interfaces

View complete interface list

🚢 Deployment

Tip

Latest Docker image: calciumion/new-api:latest

📋 Deployment Requirements

Component Requirement
Local database SQLite (Docker must mount /data directory)
Remote database MySQL ≥ 5.7.8 or PostgreSQL ≥ 9.6
Container engine Docker / Docker Compose

⚙️ Environment Variable Configuration

Common environment variable configuration
Variable Name Description Default Value
SESSION_SECRET Session secret (required for multi-machine deployment) -
CRYPTO_SECRET Encryption secret (required for Redis) -
SQL_DSN Database connection string -
REDIS_CONN_STRING Redis connection string -
STREAMING_TIMEOUT Streaming timeout (seconds) 300
STREAM_SCANNER_MAX_BUFFER_MB Max per-line buffer (MB) for the stream scanner; increase when upstream sends huge image/base64 payloads 64
MAX_REQUEST_BODY_MB Max request body size (MB, counted after decompression; prevents huge requests/zip bombs from exhausting memory). Exceeding it returns 413 32
AZURE_DEFAULT_API_VERSION Azure API version 2025-04-01-preview
ERROR_LOG_ENABLED Error log switch false
PYROSCOPE_URL Pyroscope server address -
PYROSCOPE_APP_NAME Pyroscope application name new-api
PYROSCOPE_BASIC_AUTH_USER Pyroscope basic auth user -
PYROSCOPE_BASIC_AUTH_PASSWORD Pyroscope basic auth password -
PYROSCOPE_MUTEX_RATE Pyroscope mutex sampling rate 5
PYROSCOPE_BLOCK_RATE Pyroscope block sampling rate 5
HOSTNAME Hostname tag for Pyroscope new-api

📖 Complete configuration: Environment Variables Documentation

🔧 Deployment Methods

Method 1: Docker Compose (Recommended)
# Clone the project
git clone https://github.com/QuantumNous/new-api.git
cd new-api

# Edit configuration
nano docker-compose.yml

# Start service
docker-compose up -d
Method 2: Docker Commands

Using SQLite:

docker run --name new-api -d --restart always \
  -p 3000:3000 \
  -e TZ=Asia/Shanghai \
  -v ./data:/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 ./data:/data \
  calciumion/new-api:latest

💡 Path explanation:

  • ./data:/data - Relative path, data saved in the data folder of the current directory
  • You can also use absolute path, e.g.: /your/custom/path:/data
Method 3: BaoTa Panel
  1. Install BaoTa Panel (≥ 9.2.0 version)
  2. Search for New-API in the application store
  3. One-click installation

📖 Tutorial with images

⚠️ Multi-machine Deployment Considerations

Warning

  • Must set SESSION_SECRET - Otherwise login status inconsistent
  • Shared Redis must set CRYPTO_SECRET - Otherwise data cannot be decrypted

🔄 Channel Retry and Cache

Retry configuration: Settings → Operation Settings → General Settings → Failure Retry Count

Cache configuration:

  • REDIS_CONN_STRING: Redis cache (recommended)
  • MEMORY_CACHE_ENABLED: Memory cache

Upstream Projects

Project Description
One API Original project base
Midjourney-Proxy Midjourney interface support

Supporting Tools

Project Description
new-api-key-tool Key quota query tool
new-api-horizon New API high-performance optimized version

💬 Help Support

📖 Documentation Resources

Resource Link
📘 FAQ FAQ
💬 Community Interaction Communication Channels
🐛 Issue Feedback Issue Feedback
📚 Complete Documentation Official Documentation

🤝 Contribution Guide

Welcome all forms of contribution!

  • 🐛 Report Bugs
  • 💡 Propose New Features
  • 📝 Improve Documentation
  • 🔧 Submit Code

🌟 Star History

Star History Chart


💖 Thank you for using New API

If this project is helpful to you, welcome to give us a Star

Official DocumentationIssue FeedbackLatest Release

Built with ❤️ by QuantumNous

S
Description
No description provided
Readme AGPL-3.0
64 MiB
Languages
Go 75.9%
TypeScript 22.8%
CSS 0.9%
JavaScript 0.3%