feat(webview): 添加错误横幅组件显示错误信息

[Lin-wool]

User description

Summary

• 新增 ErrorBanner 组件，以横幅形式展示错误信息
• 支持错误消息的显示与交互

Changes

• 新增 ErrorBanner.tsx 和 ErrorBanner.css 组件文件
• 在 App.tsx 中集成 ErrorBanner 组件
• 新增 AssistantGroup.tsx 和 AssistantMarkdown.tsx 组件
• 新增 groupReducer.ts 状态管理

Test plan

• 验证错误横幅在出错时正确显示
• 验证前端构建正常通过

---

PR Type

enhancement, bug_fix

---

Description

• Add quota/billing error detection in ChatService.kt to classify insufficient_quota, billing, credit, and payment-related errors

• Redesign ErrorBanner component with distinct visual styles for each error type (config, quota, network, runtime) and custom icons

• Implement retry functionality that re-sends the last user message when clicking "重试" on network errors

• Update error handling to dynamically set error type based on connection state (config vs runtime)

---

Diagram Walkthrough

flowchart LR
  A[User Action] --> B{Send Message}
  B --> C{Connection State}
  C -->|unconfigured/error| D[Error Type: config]
  C -->|connected| E[Error Type: runtime]
  D --> F[ErrorBanner: Open Settings]
  E --> G[ErrorBanner: Close/Retry]
  
  H[Stream Error] --> I[classifyStreamError]
  I --> J{Error Type}
  J -->|401/403/API Key| K[config]
  J -->|quota/billing| L[quota]
  J -->|timeout/5xx/429| M[network]
  J -->|other| N[runtime]
  
  K --> O[Show ErrorBanner]
  L --> O
  M --> O
  N --> O

Loading

File Walkthrough

	Relevant files
Bug_fix	1 files ChatService.kt Add quota error type classification                                            +6/-0
Enhancement	4 files App.tsx Add error action handling and retry logic                                +26/-2    ErrorBanner.tsx Redesign ErrorBanner with custom styling                                  +81/-20  bridge.d.ts Add quota to BridgeError type                                                        +1/-1      ErrorBanner.css Add custom CSS for error banners                                                  +161/-0
Documentation	1 files 技术方案.md Add technical design documentation                                              +208/-0
Additional files	1 files index.html +86/-88

---

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Missing loading state in retry In handleErrorAction for retry action (lines 164-173), when retrying a message, the code adds a new message to groups and calls sendMessage, but doesn't explicitly set isLoading to true. While the backend may handle this, explicit state management would ensure the UI shows the loading indicator immediately, avoiding potential UI inconsistency during the retry request. } else if (action === 'retry' && lastUserMessageRef.current) { const msg = lastUserMessageRef.current const userMsgId = uuidv4() setAppState(prev => ({ ...prev, groups: [...prev.groups, { type: 'human' as const, id: userMsgId, message: { id: userMsgId, content: msg.text } }], error: null, })) window.__bridge?.sendMessage(msg.text, msg.includeContext) }

[github-actions]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Set isLoading to true when retrying failed message When retrying a failed message, the loading state is not set to true. This causes the UI to not show any loading indicator while waiting for the response, leaving the user without feedback that a request is in progress. webview/src/App.tsx [164-172] } else if (action === 'retry' && lastUserMessageRef.current) { const msg = lastUserMessageRef.current const userMsgId = uuidv4() setAppState(prev => ({ ...prev, + isLoading: true, groups: [...prev.groups, { type: 'human' as const, id: userMsgId, message: { id: userMsgId, content: msg.text } }], error: null, })) window.__bridge?.sendMessage(msg.text, msg.includeContext) } Suggestion importance[1-10]: 7 __ Why: The suggestion correctly identifies that when retrying a failed message, the isLoading state is not set to true, which would leave the user without visual feedback that a request is in progress. Adding isLoading: true to the state update ensures the UI properly indicates loading status during retry, matching the behavior of the initial send flow. This improves user experience by providing clear feedback during the retry operation.	Medium