zhaohai666 opened a new pull request, #483:
URL: https://github.com/apache/rocketmq-dashboard/pull/483
# PR Title
`[studio] feat: add LLM Settings configuration page`
## PR Description
```markdown
## Basic Info
- Branch: feature/studio-llmsettings-page (target repo: rocketmq-studio)
- Total commits: 3
- Code changes: 5 files, +1086 lines
## Changed Files
| File | Line Changes | Description |
|------|--------------|-------------|
| llm.ts | +67 | LLM API layer, including 3 TypeScript interfaces and 4
request functions |
| llm.test.ts | +135 | 7 unit test cases covering all LLM API logic |
| LlmSettings.tsx | +782 | Full LLM provider configuration page component |
| translations.ts | +100 | Add over 50 i18n translation keys for LLM module |
| App.tsx | +2 | Register new route entry for LLM Settings page |
## API Layer (llm.ts)
### Type Interfaces
1. LlmConfig
```typescript
{
provider: string;
apiKey: string;
apiBase: string;
model: string;
maxTokens: number;
temperature: number;
enabled: boolean;
deploymentName?: string;
apiVersion?: string;
awsRegion?: string;
}
```
2. LlmTestResult
```typescript
{ status: number; msg?: string; errMsg?: string }
```
3. LlmModelsResult
```typescript
{ status: number; data?: LlmModelItem[] }
```
- Sub interface LlmModelItem: `{ id?: string; name?: string }`
### API Functions
1. `getLlmConfig()`
- HTTP Method: GET
- Endpoint: `/llm/config`
- Return: LlmConfig
2. `saveLlmConfig(config)`
- HTTP Method: POST
- Endpoint: `/llm/config`
- Return: LlmTestResult
3. `testLlmConnection(config)`
- HTTP Method: POST
- Endpoint: `/llm/config/test`
- Return: LlmTestResult
4. `getLlmModels()`
- HTTP Method: GET
- Endpoint: `/llm/models`
- Return: LlmModelsResult
## API Test Coverage (7 test cases total)
1. fetches LLM config
Verify GET API returns complete LlmConfig structure
2. saves LLM config and returns success result
Validate JSON request body contains provider and model fields
3. tests LLM connection with success
Send test request with apiKey, assert returned status = 0
4. tests LLM connection with failure
Handle failed response with status = 1 and error message
5. fetches available model list
Confirm API returns valid LlmModelItem array
6. handles empty models list response
Render fallback models when backend returns empty data
7. saves config with Azure extended fields
Verify request body carries extra Azure parameters: deploymentName,
apiVersion
## Page Functionalities (LlmSettings.tsx)
### 1. Provider Selection Grid
6 provider card options with highlight and CheckCircle indicator for
selected item:
OpenAI / Azure OpenAI / DeepSeek / Tongyi Qwen / Ollama / AWS Bedrock
### 2. Connection Configuration Area
- API Key input (password masked view; clear mask on focus, restore mask on
blur if empty)
- API Base URL input
- Conditional extra fields:
- Azure OpenAI: Deployment Name dropdown, API Version dropdown
- AWS Bedrock: AWS Region dropdown
### 3. Model Parameter Panel
- Model selector: Searchable Dropdown, loads real-time model list via API
with FALLBACK_MODELS as backup
- Max Tokens slider (range: 256 ~ 128K)
- Temperature slider (range: 0 ~ 2)
### 4. Operation Buttons
- Save Config button
- Test Connection button (auto-save config if test passes)
### 5. Connection Test Feedback
Dismissible Alert component to display success or failure messages
### 6. Global Enable Toggle
Switch control placed in PageHeader extra zone to enable/disable LLM
capability
### Provider Configuration Matrix
| Provider | Icon | Default Base URL | Default Model | API Key Required |
Base URL Required | Extra Fields |
|----------|------|------------------|---------------|------------------|-------------------|--------------|
| OpenAI | 🤖 | https://api.openai.com/v1 | gpt-4o | ✅ | ❌ | None |
| Azure OpenAI | ☁️ | — | gpt-4o | ✅ | ✅ | deploymentName, apiVersion |
| DeepSeek | 🔍 | https://api.deepseek.com/v1 | deepseek-chat | ✅ | ❌ | None |
| Tongyi Qwen | 🧠 | https://dashscope.aliyuncs.com/compatible-mode/v1 |
qwen-max | ✅ | ❌ | None |
| Ollama | 🦙 | http://localhost:11434/v1 | llama3 | ❌ | ✅ | None |
| AWS Bedrock | ☁️ | — | claude-3-sonnet | ✅ | ❌ | awsRegion |
### API Key Security Rules
- Masked display on initial load: show first 4 & last 4 characters, replace
middle with `••••••••`
- Clear mask when input is focused for editing
- Restore mask if input loses focus without new value input
- Re-apply mask after config save or successful connection test
### I18n Translation Keys (50+ keys)
Covers page title & subtitle, enable switch label, provider names &
descriptions, all config labels / placeholders / validation rules, model
parameter texts, button labels, test result prompts, save & loading
notifications.
## Route Registration
Add new route inside App.tsx:
```tsx
<Route path="studio/llm-settings" element={<LlmSettingsPage />} />
```
## Build Fixes
1. Remove unsupported `icon={Robot}` prop from PageHeader to resolve
TypeScript error
2. Delete unused Robot icon import statement
## Validation Results
✅ `npm run build` compiles without errors
✅ All 35 test cases across 6 test files passed (including 7 LLM API test
cases)
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
