修改前端，"测试场"新增测试模型网关模型#1597
Conversation
在测试场的渠道下拉中新增“模型网关”选项，用于通过默认路由流程测试模型页配置的模型。 选择“模型网关”时，模型下拉会加载模型页中已启用的聊天模型并显示模型名；发送请求时不再携带 X-Channel-ID，让后端根据模型关联规则自动解析可用渠道。原有按渠道测试的流程保持不变。
Greptile SummaryThe PR adds a Model Gateway test mode to the Playground UI via a tab switcher, allowing users to test models through the default routing flow without specifying a channel. Confidence Score: 5/5This PR is safe to merge — changes are frontend-only, additive, and well-guarded. No P0 or P1 issues found. The deferred-query pattern with No files require special attention. Important Files Changed
Sequence DiagramsequenceDiagram
participant User
participant Playground UI
participant React Query
participant Backend
User->>Playground UI: Select "Channel" tab (default)
Playground UI->>React Query: useQueryChannels (always enabled)
React Query-->>Playground UI: channelsData
Playground UI->>Playground UI: Auto-select first channel + model
User->>Playground UI: Send message
Playground UI->>Backend: POST /admin/playground/chat<br/>Headers: Authorization, X-Project-ID, X-Channel-ID<br/>Body: {model, temperature, max_tokens, system}
Backend-->>Playground UI: Streaming response
User->>Playground UI: Switch to "Model Gateway" tab
Playground UI->>React Query: useQueryModels (now enabled)
React Query-->>Playground UI: modelsData (enabled chat models)
Playground UI->>Playground UI: Auto-select first model from list
User->>Playground UI: Send message
Playground UI->>Backend: POST /admin/playground/chat<br/>Headers: Authorization, X-Project-ID (no X-Channel-ID)<br/>Body: {model, temperature, max_tokens, system}
Backend->>Backend: Auto-resolve channel via model routing rules
Backend-->>Playground UI: Streaming response
Reviews (2): Last reviewed commit: "改为使用Tab，页面足够，使用更清晰" | Re-trigger Greptile |
There was a problem hiding this comment.
Code Review
This pull request introduces a "Model Gateway" option to the playground, allowing users to select models directly from the model page. It updates the useQueryModels hook to support conditional fetching and modifies the playground's selection logic and UI to integrate this new channel. Feedback includes addressing a UX inconsistency where the default selected channel does not match the first item in the dropdown list and a suggestion to memoize query arguments in the useQueryModels hook to optimize performance.
| useEffect(() => { | ||
| if (!selectedChannel && channelOptions.length > 0) { | ||
| handleChannelChange(channelOptions[0].value); | ||
| if (!selectedChannel && !channelsLoading && channelOptions.length > 0) { | ||
| handleChannelChange(realChannelOptions[0]?.value ?? MODEL_PAGE_CHANNEL_VALUE); | ||
| } | ||
| }, [channelOptions, handleChannelChange, selectedChannel]); | ||
| }, [channelOptions, channelsLoading, handleChannelChange, realChannelOptions, selectedChannel]); |
There was a problem hiding this comment.
The initialization logic defaults to the first real channel (realChannelOptions[0]) if available, even though the "Model Gateway" option is prepended to the channelOptions list and appears first in the UI. This creates a UX inconsistency where the first item in the dropdown is not the default selection. Consider either making the "Model Gateway" the default or moving it to the end of the list to match the default selection behavior.
| const { data: modelsData, isLoading: modelsLoading } = useQueryModels( | ||
| { | ||
| first: 10000, | ||
| orderBy: { field: 'NAME', direction: 'ASC' }, | ||
| where: { | ||
| statusIn: ['enabled'], | ||
| typeIn: ['chat'], | ||
| }, | ||
| }, | ||
| { enabled: isModelPageChannel } | ||
| ); |
There was a problem hiding this comment.
The args object passed to useQueryModels is created on every render. While TanStack Query performs a deep comparison on the queryKey, it is generally better practice to memoize static arguments to avoid unnecessary object creation and comparison logic in the hook.
| const { data: modelsData, isLoading: modelsLoading } = useQueryModels( | |
| { | |
| first: 10000, | |
| orderBy: { field: 'NAME', direction: 'ASC' }, | |
| where: { | |
| statusIn: ['enabled'], | |
| typeIn: ['chat'], | |
| }, | |
| }, | |
| { enabled: isModelPageChannel } | |
| ); | |
| const modelQueryArgs = useMemo(() => ({ | |
| first: 10000, | |
| orderBy: { field: 'NAME' as const, direction: 'ASC' as const }, | |
| where: { | |
| statusIn: ['enabled'], | |
| typeIn: ['chat'], | |
| }, | |
| }), []); | |
| const { data: modelsData, isLoading: modelsLoading } = useQueryModels( | |
| modelQueryArgs, | |
| { enabled: isModelPageChannel } | |
| ); |
|
建议改成 tab，而不是使用一个特殊的值。 |
改为使用Tab，页面足够，使用更清晰
确实，这样更清晰，修改为tab提交了 |
在测试场的渠道下拉中新增“模型网关”选项，用于通过默认路由流程测试模型页配置的模型。
选择“模型网关”时，模型下拉会加载模型页中已启用的聊天模型并显示模型名；发送请求时不再携带 X-Channel-ID，让后端根据模型关联规则自动解析可用渠道。原有按渠道测试的流程保持不变。