issue: tool and skill toggles in the Integrations menu do not update until the submenu is reopened

该问题发生在 Open WebUI 聊天输入框的 Integrations 菜单中,点击 Skills 或 Tools 子菜单里的开关后,开关状态不会立即刷新,必须关闭并重新打开子菜单才会显示正确状态。优先排查前端状态更新逻辑,特别是 toggle 处理函数中直接修改本地变量的写法。

快速结论:该问题发生在 Open WebUI 聊天输入框的 Integrations 菜单中,点击 Skills 或 Tools 子菜单里的开关后,开关状态不会立即刷新,必须关闭并重新打开子菜单才会显示正确状态。优先排查前端状态更新逻辑,特别是 toggle 处理函数中直接修改本地变量的写法。

适用环境:Open WebUI `dev` 分支 @ `5ea9ff3ed`,Linux 操作系统,Firefox 浏览器,Git Clone 方式安装。未确认 Python、CUDA、显卡等后端环境。

最快修复方案:暂无确认的一步修复方案。Issue 已确认这是前端组件的状态更新 bug,已作为新问题 #28807 重新开启跟踪。

注意事项:该修复涉及前端组件状态管理逻辑,在官方发布修复前,用户可通过临时刷新页面或重新进入菜单来查看最新状态。`aria-pressed` 属性和 `data-state` 都未同步更新,可能影响使用辅助技术的用户。

问题场景

用户运行 Open WebUI `dev` 分支 @ `5ea9ff3ed`,在聊天输入框点击 Integrations 按钮,进入 Skills 或 Tools 子菜单,点击任意技能或工具行中的开关时,开关不会立即切换。虽然实际功能已生效(技能/工具图标立即出现在聊天输入框),但开关本身仍显示旧状态,只有离开并重新进入该子菜单后才会刷新显示。

报错原文

issue: tool and skill toggles in the Integrations menu do not update until the submenu is reopened

The switch does not move. The row keeps rendering its previous state until the submenu is left and reopened, at which point it shows the correct state.

| Before the click | `aria-pressed` = `false` | switch `data-state` = `unchecked` |
| After the click | `aria-pressed` = `false` | switch `data-state` = `unchecked` |
| After leaving and reopening the submenu | `aria-pressed` = `true` | switch `data-state` = `checked` |

原因分析

根据 Issue 中提供的源码片段,问题可能出在 IntegrationsMenu.svelte 组件的 toggle 处理函数上。两个 toggle 处理器都将技能或工具条目复制到本地变量,然后直接修改该变量的属性:

const skill = skills?.[skillId];
if (!skill) return;
skill.enabled = !skill.enabled;

这种直接操作本地变量并修改对象属性的写法,可能不会触发 Svelte 的响应式更新机制,导致 UI 没有重新渲染。值得注意的是,同一菜单中的 Web SearchImageCode Interpreter 使用相同的 Switch 组件且可以正常切换,因此 Switch 组件本身和下拉菜单组件都可以排除在外。

环境排查

  • 确认 Open WebUI 版本是否为 `dev` 分支 @ `5ea9ff3ed` 或更早版本
  • 确认浏览器是否为 Firefox(其他浏览器可能表现不同)
  • 确认是否通过 Git Clone 方式安装
  • 检查浏览器控制台是否有关键的前端错误日志
  • 如果使用 Docker 部署,检查容器日志中是否有相关提示

解决步骤

  1. 先在 Issue #28807 跟踪官方修复进度,该问题已由原 Issue 作者重新开启跟踪。
  2. 临时绕过方案:点击开关后,点击子菜单标题返回上级菜单,再重新进入对应子菜单,即可看到正确状态。
  3. 可优先尝试升级到最新的稳定版本或更新的 `dev` 分支提交,确认问题是否已在后续版本中修复。
  4. 如果问题仍然存在,可尝试从源码构建最新版本,或检查是否有针对 IntegrationsMenu.svelte 组件的前端补丁或 PR。
  5. 如需紧急修复,可考虑在前端代码中修改 toggle 处理函数,使用 Svelte 的响应式语法(如 skills = {...skills, [skillId]: {...skill, enabled: !skill.enabled}})替换直接修改变量属性的写法。

验证方法

修复后,在聊天输入框点击 Integrations 按钮,进入 Skills 或 Tools 子菜单,点击任意开关,确认开关状态立即切换(`aria-pressed` 和 `data-state` 同步更新),且无需重新进入子菜单即可看到新的状态。同时确认技能或工具确实已启用,图标已出现在聊天输入框中。

参考来源

open-webui/open-webui #28803

GamsGo AI

AI 工具推荐

想把多个 AI 模型放在一个入口?

GamsGo AI 集成 ChatGPT、DeepSeek、Gemini、Claude、Midjourney、Veo 等常用模型,适合写作、绘图、视频和日常 AI 工作流。

了解 GamsGo AI

推广链接:通过此链接购买,我可能获得佣金,不影响你的价格。

这个方案解决了吗?

celebrityanime
celebrityanime
文章: 19163

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注