fix(provider): allow removing custom whitelisted models (#592) by ding113 · Pull Request #593 · ding113/claude-code-hub

ding113 · 2026-01-11T16:16:45Z

问题

当用户通过手动添加模型把模型加入白名单，但该模型不在供应商远端模型列表（availableModels）中时，列表不会渲染该模型，导致无法取消勾选进行单个删除。

相关 Issue:

Fixes 供应商模型白名单中无法删除已选中模型 #592

修复

渲染列表合并 availableModels + selectedModels（缺失项追加），保证自定义模型可见且可取消选中。
新增单测覆盖该回归场景。

变更

核心变更

model-multi-select.tsx: 添加 displayedModels 计算逻辑，合并 availableModels 和 selectedModels，确保自定义白名单模型可见且可取消选中

测试覆盖

新增单元测试 model-multi-select-custom-models-ui.test.tsx (112 行)
覆盖自定义模型渲染和取消选中场景

验证

Description enhanced by Claude AI

coderabbitai · 2026-01-11T16:16:57Z

📝 Walkthrough

Walkthrough

该拉取请求为 ModelMultiSelect 组件添加了显示派生模型列表的功能，该列表合并了可用模型与已选模型，确保即使在远程列表中不存在的自定义模型也能显示并支持移除操作，并新增相应的单元测试用例。

Changes

凝聚组 / 文件	变更摘要
ModelMultiSelect 组件增强 `src/app/[locale]/settings/providers/_components/model-multi-select.tsx`	引入派生列表 `displayedModels`，合并 `availableModels` 和 `selectedModels`，去除重复项。UI 现在渲染合并后的列表，确保自定义模型可见且可切换关闭。无公开签名变更。
单元测试新增 `tests/unit/settings/providers/model-multi-select-custom-models-ui.test.tsx`	新增单元测试文件，验证预选但不在 `availableModels` 中的模型在 UI 中保持可见，支持移除操作，并确保 `onChange` 回调被正确调用。测试覆盖可用模型获取及状态变更传播。

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	标题清晰准确地总结了主要变更：允许删除自定义白名单模型，与变更集完全相关。
Description check	✅ Passed	描述详细说明了问题、修复方案和验证步骤，与变更集高度相关且信息充分。

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch fix/provider-model-whitelist-remove-592

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

gemini-code-assist · 2026-01-11T16:16:59Z

Summary of Changes

Hello @ding113, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

此拉取请求旨在增强模型管理的用户体验，特别是针对自定义模型。它解决了一个关键问题，即用户无法从白名单中移除那些不在供应商默认可用模型列表中的手动添加模型。通过优化模型列表的渲染机制，确保所有已选模型都能在界面上可见并可操作，从而提升了系统的健壮性和用户对模型配置的控制能力。

Highlights

修复自定义模型移除问题: 解决了当用户手动添加的模型不在供应商远程模型列表（availableModels）中时，无法在界面上取消勾选并删除的问题。
改进模型列表渲染逻辑: 修改了模型多选组件的渲染逻辑，通过合并 availableModels 和 selectedModels 来确保所有已选中的自定义模型即使不在远程列表中也能被正确显示，从而允许用户进行取消选中操作。
新增单元测试: 增加了一个新的单元测试（model-multi-select-custom-models-ui.test.tsx），以覆盖并验证此回归场景的修复。

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

你好，感谢你的贡献！这个修复解决了自定义白名单模型在列表中不可见从而无法移除的问题，逻辑清晰。同时，你还添加了对应的单元测试来覆盖这个回归场景，这非常好。

我有一个小建议，可以简化合并模型的代码并使用 useMemo 进行性能优化。具体请看我的评论。

gemini-code-assist · 2026-01-11T16:18:31Z

src/app/[locale]/settings/providers/_components/model-multi-select.tsx

+  const displayedModels = (() => {
+    const seen = new Set<string>();
+    const merged: string[] = [];
+
+    for (const model of availableModels) {
+      if (seen.has(model)) continue;
+      seen.add(model);
+      merged.push(model);
+    }
+
+    // 关键：把已选中但不在远端列表的自定义模型也渲染出来，保证可取消选中
+    for (const model of selectedModels) {
+      if (seen.has(model)) continue;
+      seen.add(model);
+      merged.push(model);
+    }
+
+    return merged;
+  })();


为了提高代码的可读性和性能，建议简化 displayedModels 的实现。

当前的 IIFE 写法有些冗长。我们可以使用 Set 和展开语法 ... 来更简洁地合并和去重数组。

此外，将此计算包装在 useMemo hook 中可以避免在组件因其他状态（如 customModel）更新而重新渲染时进行不必要的重复计算。

请在文件顶部引入 useMemo:

import { useCallback, useEffect, useMemo, useState } from "react";

然后可以将 displayedModels 的实现修改如下：

const displayedModels = useMemo( () => [...new Set([...availableModels, ...selectedModels])], [availableModels, selectedModels], );

github-actions · 2026-01-11T16:18:58Z

🧪 测试结果

测试类型	状态
代码质量	✅
单元测试	✅
集成测试	✅
API 测试	✅

总体结果: ✅ 所有测试通过

greptile-apps

_{1 file reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

greptile-apps · 2026-01-11T16:19:16Z

Additional Comments (1)

src/app/[locale]/settings/providers/_components/model-multi-select.tsx
[P1] Clicking "Select All" removes custom models. The selectAll function uses availableModels, but after your fix, the displayed list includes custom models from selectedModels. When a user with custom models clicks "Select All", those custom models get removed since they're not in availableModels. Change to onChange(displayedModels) to preserve custom models.

Prompt To Fix With AI

This is a comment left during a code review.
Path: src/app/[locale]/settings/providers/_components/model-multi-select.tsx
Line: 149:149

Comment:
[P1] Clicking "Select All" removes custom models. The `selectAll` function uses `availableModels`, but after your fix, the displayed list includes custom models from `selectedModels`. When a user with custom models clicks "Select All", those custom models get removed since they're not in `availableModels`. Change to `onChange(displayedModels)` to preserve custom models.

How can I resolve this? If you propose a fix, please make it concise.

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (1)

tests/unit/settings/providers/model-multi-select-custom-models-ui.test.tsx (1)

25-61: 考虑提取测试辅助函数以提高复用性

loadMessages、render 和 flushTicks 是通用的测试辅助函数，建议提取到共享的测试工具文件（如 tests/utils/test-helpers.tsx）中，以便在其他测试文件中复用，提高可维护性。

♻️ 建议的重构方案

创建 tests/utils/test-helpers.tsx:

import fs from "node:fs";
import path from "node:path";
import type { ReactNode } from "react";
import { act } from "react";
import { createRoot } from "react-dom/client";
import { NextIntlClientProvider } from "next-intl";

export function loadMessages() {
  const base = path.join(process.cwd(), "messages/en");
  const read = (name: string) => JSON.parse(fs.readFileSync(path.join(base, name), "utf8"));

  return {
    common: read("common.json"),
    errors: read("errors.json"),
    ui: read("ui.json"),
    forms: read("forms.json"),
    settings: read("settings.json"),
  };
}

export function renderWithIntl(node: ReactNode, locale = "en") {
  const messages = loadMessages();
  const container = document.createElement("div");
  document.body.appendChild(container);
  const root = createRoot(container);

  act(() => {
    root.render(
      <NextIntlClientProvider locale={locale} messages={messages} timeZone="UTC">
        {node}
      </NextIntlClientProvider>
    );
  });

  return {
    unmount: () => {
      act(() => root.unmount());
      container.remove();
    },
  };
}

export async function flushTicks(times = 3) {
  for (let i = 0; i < times; i++) {
    await act(async () => {
      await new Promise((r) => setTimeout(r, 0));
    });
  }
}

然后在测试文件中导入使用：

import { loadMessages, renderWithIntl, flushTicks } from "@/tests/utils/test-helpers";

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Cache: Disabled due to Reviews > Disable Cache setting

📥 Commits

Reviewing files that changed from the base of the PR and between 6c79b88 and d00de01.

📒 Files selected for processing (2)

src/app/[locale]/settings/providers/_components/model-multi-select.tsx
tests/unit/settings/providers/model-multi-select-custom-models-ui.test.tsx

🧰 Additional context used

📓 Path-based instructions (5)

**/*.{js,ts,tsx,jsx}