Skip to content

feat: UI/UX enhancement for model call failures (#1213)#1219

Open
eureka928 wants to merge 9 commits intoeigent-ai:mainfrom
eureka928:feat/model-error-ux
Open

feat: UI/UX enhancement for model call failures (#1213)#1219
eureka928 wants to merge 9 commits intoeigent-ai:mainfrom
eureka928:feat/model-error-ux

Conversation

@eureka928
Copy link
Contributor

Description

Implements UI/UX improvements for model call failures to guide users toward fixing configuration issues, as described in #1213.

Backend:

  • Enrich SSE error events with error_code (invalid_api_key, model_not_found, insufficient_quota) using the existing normalize_error_to_openai_format() classifier
  • Add lightweight PATCH /provider/{id}/invalidate endpoint to mark a provider as invalid without sending full provider data

Frontend:

  • Add model error toast with contextual message and "Model Settings" link (persistent for invalid_api_key, 8s for others)
  • On invalid_api_key errors, automatically call the invalidation endpoint to mark the provider invalid on the server
  • Fix is_valid field mapping — the backend returns is_vaild (legacy typo) but the frontend was reading is_valid, resulting in the green dot always being wrong
  • Fix save payloads to send is_vaild: 2 (the correct field name and enum value)
  • Update status indicators across sidebar, BYOK detail view, and Default Settings dropdown:
    • Green dot → configured AND valid
    • Red dot → configured but invalid
    • No dot → not configured
  • Show inline "API Key Invalid or Expired" warning on the API key input when a provider is invalidated
  • Default Settings dropdown trigger switches from green to warning styling when the default model is invalid

i18n:

  • Add toast message and setting warning keys across all 11 locales

Related Issue

Closes #1213

Changes Made

File Change
backend/app/service/chat_service.py Enrich SSE error with error_code
server/app/controller/provider/provider_controller.py Add PATCH /provider/{id}/invalidate
src/api/http.ts Add proxyFetchPatch helper, PATCH method support
src/types/chatbox.d.ts Add error_code to AgentMessage.data
src/components/Toast/modelErrorToast.tsx New — toast with settings link
src/store/chatStore.ts Show toast on error, call invalidation endpoint
src/pages/Setting/Models.tsx Fix is_valid mapping, update status dots, add warnings
src/i18n/locales/*/chat.json New toast message keys (×11)
src/i18n/locales/*/setting.json New warning label keys (×11)

What is the purpose of this pull request?

  • Bug fix
  • New Feature
  • Documentation update
  • Other

Create getToolkitIcon() that maps toolkit names to lucide-react icons
by tool category (dev, browser, documents, media, communication,
integrations) with a Wrench fallback for unknown toolkits.
Replace agent-type icons with per-toolkit icons using getToolkitIcon()
so each tool action (Terminal, Browser, Note, etc.) is visually distinct.
Use normalize_error_to_openai_format() to classify ModelProcessingError
and generic Exception errors, including error_code in SSE payloads so
the frontend can take targeted action (e.g. invalid_api_key,
model_not_found, insufficient_quota).
Lightweight endpoint to mark a provider as invalid without requiring the
full provider payload, used by the frontend when an API key error is
detected during a model call.
Add PATCH method support to proxyFetchRequest and expose proxyFetchPatch.
Add optional error_code field to AgentMessage.data for typed error
handling in the frontend.
Show contextual toast on model call failures with a link to Model
Settings. Persistent (Infinity duration) for invalid_api_key errors,
8s for others.
Capture preferredProviderId during chat start. On SSE error events,
show model error toast and call the invalidation endpoint when
error_code is invalid_api_key.
Fix is_valid field mapping to read is_vaild (legacy typo) from the API
response. Fix save payloads to send is_vaild: 2 (VaildStatus.is_valid).
Update sidebar, BYOK detail, and default model dropdown to show red
indicators for invalid providers and warning styling on the dropdown
trigger. Show inline API key error when provider is invalidated.
Add chat keys for model error toast messages (invalid_api_key,
model_not_found, insufficient_quota) and setting keys for API key
invalid warning and default model unavailable labels across all
11 locales.
@eureka928
Copy link
Contributor Author

@Wendong-Fan @Pakchoioioi @4pmtong @bytecii would you review my PR?
Thank you for your time

@eureka928
Copy link
Contributor Author

Hi @bytecii would you review my PR?
Thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature Request] UI/UX enhancement for model call failures and BYOK configuration status

1 participant