fix: unified dialog/toast UI for all confirm and alert popups#474
fix: unified dialog/toast UI for all confirm and alert popups#474cinderzhan wants to merge 1 commit intomainfrom
Conversation
…dal/toast Users were seeing browser-default confirm() and alert() popups (session delete, model connectivity test, etc.) that broke visual consistency with the rest of the app. Introduces a unified dialog/toast system so every notification uses the Clawith UI. - DialogProvider + useDialog(): centered modal with Promise-based confirm() and alert() API, info/success/warning/error types, collapsible details for long error payloads (e.g. LLM connectivity test raw errors). - ToastProvider + useToast(): top-right auto-dismissing notifications with the same type/details support for non-critical errors. - Migrated all 46 native alert/confirm call sites across 9 files following the split: destructive or must-acknowledge -> dialog; non-critical -> toast. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 7e9ab1273c
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| )} | ||
| {existingProvider && ( | ||
| <button className="btn btn-ghost btn-sm" style={{ color: 'var(--error)' }} onClick={() => confirm('Are you sure you want to delete this configuration?') && deleteProvider.mutate(existingProvider.id)}> | ||
| <button className="btn btn-ghost btn-sm" style={{ color: 'var(--error)' }} onClick={async () => { const ok = await dialog.confirm('确定要删除此配置吗？', { title: '删除配置', danger: true, confirmLabel: '删除' }); if (ok) deleteProvider.mutate(existingProvider.id); }}> |
There was a problem hiding this comment.
The delete-configuration button now calls dialog.confirm(...) inside OrgTab, but OrgTab does not create a dialog instance (the hook is only initialized in other components). Clicking this button will throw a runtime ReferenceError and the delete flow will break for identity-provider configs.
Useful? React with 👍 / 👎.
| return ( | ||
| <div | ||
| role="status" | ||
| onMouseEnter={pause} |
There was a problem hiding this comment.
The toast timer is cleared on onMouseEnter, but there is no corresponding restart on mouse leave, so any toast the cursor touches can remain indefinitely instead of auto-dismissing. This causes notification buildup during normal use near the top-right corner and contradicts the expected transient behavior.
Useful? React with 👍 / 👎.
1 participant
Summary
confirm()/alert()popups (session delete, model connectivity test, file upload errors, etc.) that broke visual consistency with the rest of the app.What changed
DialogProvider+useDialog(): centered modal with Promise-basedconfirm()andalert()API. Supportsinfo / success / warning / errortypes and collapsible details for long error payloads (e.g. the LLM connectivity test's raw 429 response).ToastProvider+useToast(): top-right, auto-dismissing notifications with the same type/details support for non-critical errors.Test plan
🤖 Generated with Claude Code