Back to Details

ai-agent-ui-support

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

AI Agent UI Support

AI Agent UI 支持

Add a reusable AI Agent interface to an existing web application.
The Agent should act as a supporting capability of the application. Preserve the application's existing navigation, layout, workflows, design system, state management, and business UI unless changes are required for Agent integration.
The implementation should be provider-agnostic whenever practical. It may use Gemini, OpenAI, Anthropic, local models, or other Agent-capable APIs.
Provider-specific features should be exposed through capability detection rather than hard-coded assumptions.
为现有Web应用添加可复用的AI Agent界面。
该Agent应作为应用的辅助功能存在。除非Agent集成需要，否则需保留应用现有的导航、布局、工作流、设计系统、状态管理和业务UI。
在实际可行的情况下，实现应与提供商无关。可使用Gemini、OpenAI、Anthropic、本地模型或其他支持Agent的API。
提供商特定功能应通过能力检测来暴露，而非硬编码假设。

1. Attach an Agent Chat View to Web Application

1. 为Web应用附加Agent聊天视图

The Agent Chat View must provide:
  1. Chat View
  2. Text Input
  3. User / Agent Message Bubble
  4. Markdown display support
  5. Quick Reply / Follow-up Actions
  6. Agent Loading state
  7. Agent Activity state
  8. Session Management
  9. Long Task support
  10. Task Management Panel
  11. Multiple file input
  12. Photo and camera input
  13. Speech-to-text input
  14. Tool / Function Calling activity display
  15. RWD support
The Chat View must be implemented as a reusable feature that can be integrated into different web applications without requiring the application itself to become Agent-centric.
Agent聊天视图必须具备以下功能：
  1. 聊天视图
  2. 文本输入框
  3. 用户/Agent消息气泡
  4. Markdown展示支持
  5. 快速回复/后续操作
  6. Agent加载状态
  7. Agent活动状态
  8. 会话管理
  9. 长任务支持
  10. 任务管理面板
  11. 多文件输入
  12. 照片与相机输入
  13. 语音转文字输入
  14. 工具/函数调用活动展示
  15. RWD支持
聊天视图必须实现为可复用功能，无需让应用本身以Agent为中心，即可集成到不同Web应用中。

2. Message View

2. 消息视图

Use Message Bubbles for conversation.
text
Agent Bubble                        

                         User Bubble
Requirements:
  • User Bubble aligns right.
  • Agent Bubble aligns left.
  • Agent Bubble supports Markdown.
  • Long responses remain readable.
  • Code blocks render correctly.
  • Tables support responsive display or horizontal scrolling.
  • Links are clickable.
  • Errors are clearly distinguishable from normal Agent responses.
  • Tool execution results may be rendered as structured content.
  • Attachments sent by the user should remain visible with the corresponding message.
Markdown should support at least:
  • Heading
  • Bold
  • Italic
  • Ordered list
  • Unordered list
  • Inline code
  • Code block
  • Table
  • Quote
  • Divider
  • Link
When the Agent has predefined possible next actions, display Quick Reply / Follow-up Buttons below the Agent message.
Examples:
text
[Continue]
[View Details]
[Generate Report]
[Open Record]
[Retry]
Quick Replies must correspond to actions that can actually be executed.
使用消息气泡展示对话。
text
Agent Bubble                        

                         User Bubble
要求：
  • 用户气泡右对齐
  • Agent气泡左对齐
  • Agent气泡支持Markdown
  • 长回复保持可读性
  • 代码块正确渲染
  • 表格支持响应式展示或横向滚动
  • 链接可点击
  • 错误与正常Agent回复清晰区分
  • 工具执行结果可渲染为结构化内容
  • 用户发送的附件应与对应消息保持可见
Markdown至少需支持：
  • 标题
  • 粗体
  • 斜体
  • 有序列表
  • 无序列表
  • 行内代码
  • 代码块
  • 表格
  • 引用
  • 分隔线
  • 链接
当Agent有预定义的可能后续操作时，在Agent消息下方展示快速回复/后续操作按钮。
示例：
text
[Continue]
[View Details]
[Generate Report]
[Open Record]
[Retry]
快速回复必须对应实际可执行的操作。

3. Chat Scrolling Behavior

3. 聊天滚动行为

When new messages arrive:
  • Automatically scroll to the newest message when the user is already near the bottom.
  • Do not force-scroll when the user is reading previous messages.
  • Preserve the user's current reading position when older messages or history are loaded.
  • Agent Activity changes follow the same rule.
新消息到达时：
  • 用户已接近底部时，自动滚动到最新消息
  • 用户查看历史消息时，不强制滚动
  • 加载旧消息或历史记录时，保留用户当前阅读位置
  • Agent活动状态变化遵循相同规则

4. Multiple File Input

4. 多文件输入

Support multiple file inputs in one message.
The Agent UI should support all file types accepted by the currently selected provider and model.
Possible formats include:
text
txt
csv
pdf
xlsx
docx
ppt
pptx
json
md
and other provider-supported formats
Do not hard-code the supported format list as the source of truth.
Actual support must be determined from:
  • Current Provider
  • Current Model
  • API capability
  • File size limitations
  • Attachment count limitations
The UI must support:
  • Multiple file selection
  • Multiple files in one message
  • File name display
  • File type display
  • File size display when useful
  • Upload progress
  • Upload loading state
  • Remove individual attachment
  • Unsupported format error
  • File-too-large error
  • Upload failure and retry
Attachments must be previewed before sending when practical.
支持在一条消息中输入多个文件。
Agent UI应支持当前选中提供商和模型接受的所有文件类型。
可能的格式包括：
text
txt
csv
pdf
xlsx
docx
ppt
pptx
json
md
and other provider-supported formats
不要将支持的格式列表硬编码为事实来源。
实际支持情况必须通过以下方式确定：
  • 当前提供商
  • 当前模型
  • API能力
  • 文件大小限制
  • 附件数量限制
UI必须支持：
  • 多选文件
  • 一条消息包含多个文件
  • 文件名展示
  • 文件类型展示
  • 必要时展示文件大小
  • 上传进度
  • 上传加载状态
  • 删除单个附件
  • 不支持格式错误提示
  • 文件过大错误提示
  • 上传失败与重试
实际可行时，附件在发送前需支持预览。

5. Photo Input

5. 照片输入

Support image input through:
text
Upload Photo
Capture with Camera
Support all image formats accepted by the selected provider/model, such as:
text
jpg
jpeg
png
webp
and other supported image formats
Support:
  • Single image upload
  • Multiple image upload
  • Image preview
  • Remove image before sending
  • Camera capture
  • Camera permission handling
  • Upload failure
  • Unsupported format
  • Unsupported model capability
Camera capture should only appear when the current browser/device supports it.
通过以下方式支持图片输入：
text
Upload Photo
Capture with Camera
支持选中提供商/模型接受的所有图片格式，例如：
text
jpg
jpeg
png
webp
and other supported image formats
支持：
  • 单张图片上传
  • 多张图片上传
  • 图片预览
  • 发送前删除图片
  • 相机拍摄
  • 相机权限处理
  • 上传失败处理
  • 不支持格式提示
  • 不支持模型能力提示
仅当当前浏览器/设备支持时，才显示相机拍摄选项。

6. Speech-to-Text Input

6. 语音转文字输入

Speech-to-text is used as a method for entering text into the normal Chat Input.
It is not automatically a real-time voice conversation.
The required flow is:
text
[MIC]
  ↓
Start Recording
  ↓
Recording...
  ↓
User manually stops recording
  ↓
Transcribing...
  ↓
Text inserted into Chat Input
  ↓
User reviews / edits
  ↓
[SEND]
Requirements:
  • Click 
    [MIC]
    to start recording.
  • Recording must continue until the user explicitly stops it.
  • Do not automatically stop recording because of silence.
  • Click the microphone control again, or an explicit Stop control, to stop.
  • Show an obvious recording state.
  • Show recording elapsed time when practical.
  • After recording stops, show a transcription loading state.
  • Convert recorded audio into text.
  • Insert the result into the Chat Input.
  • Do not automatically send the transcribed result.
  • The user must be able to edit the transcription before sending.
Handle:
  • Microphone permission denied
  • Recording cancelled
  • Unsupported browser
  • Unsupported provider/model
  • Transcription error
  • Retry
Speech-to-text must not break normal text input behavior.
语音转文字作为向普通聊天输入框输入文本的一种方式，并非自动实时语音对话。
所需流程：
text
[MIC]
  ↓
Start Recording
  ↓
Recording...
  ↓
User manually stops recording
  ↓
Transcribing...
  ↓
Text inserted into Chat Input
  ↓
User reviews / edits
  ↓
[SEND]
要求：
  • 点击
    [MIC]
    开始录制
  • 录制持续到用户明确停止
  • 不因静音自动停止录制
  • 再次点击麦克风控件或明确的停止控件来停止录制
  • 显示明显的录制状态
  • 实际可行时显示录制时长
  • 录制停止后，显示转录加载状态
  • 将录制的音频转换为文本
  • 将结果插入聊天输入框
  • 不自动发送转录结果
  • 用户必须能在发送前编辑转录内容
处理以下情况：
  • 麦克风权限被拒绝
  • 录制取消
  • 浏览器不支持
  • 提供商/模型不支持
  • 转录错误
  • 重试
语音转文字不得破坏正常文本输入行为。

7. Text Input Behavior

7. 文本输入行为

The text input must support:
  • Single-line input
  • Multi-line input
  • Automatic input height expansion when appropriate
  • Enter
    to send
  • Shift + Enter
    for newline
  • Chinese IME
  • Other composition-based IME input
  • Placeholder
  • Sending state
  • Error recovery
  • Text + attachments in the same message
During IME composition, 
Enter
must not accidentally send the message.
javascript
// Example: Composition & Keydown Handling
let isComposing = false;

inputElement.addEventListener('compositionstart', () => {
  isComposing = true;
});

inputElement.addEventListener('compositionend', () => {
  isComposing = false;
});

inputElement.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    // If composing in IME or composition keycode is active, do not submit
    if (isComposing || e.isComposing || e.keyCode === 229) {
      return;
    }
  
    // Send message on Enter, allow line breaks on Shift+Enter
    if (!e.shiftKey) {
      e.preventDefault();
      if (isValidMessage()) {
        sendMessage();
      }
    }
  }
});
文本输入框必须支持：
  • 单行输入
  • 多行输入
  • 适当情况下自动扩展输入框高度
  • Enter
    键发送消息
  • Shift + Enter
    换行
  • 中文IME
  • 其他基于组合的IME输入
  • 占位符
  • 发送状态
  • 错误恢复
  • 同一条消息包含文本和附件
IME组合输入期间，
Enter
键不得意外发送消息。
javascript
// Example: Composition & Keydown Handling
let isComposing = false;

inputElement.addEventListener('compositionstart', () => {
  isComposing = true;
});

inputElement.addEventListener('compositionend', () => {
  isComposing = false;
});

inputElement.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    // If composing in IME or composition keycode is active, do not submit
    if (isComposing || e.isComposing || e.keyCode === 229) {
      return;
    }
  
    // Send message on Enter, allow line breaks on Shift+Enter
    if (!e.shiftKey) {
      e.preventDefault();
      if (isValidMessage()) {
        sendMessage();
      }
    }
  }
});

8. Chat View RWD

8. 聊天视图RWD

The Agent interface must support responsive web design.
The primary responsive modes are:
text
Desktop Narrow
Desktop Wide
Mobile
mermaid
graph TD
    A[Screen Size / Trigger] --> B{Screen Width}
    B -- "< 768px (Mobile)" --> C[Mobile Mode]
    B -- "768px - 1024px (Tablet / Desktop Compact)" --> D[Compact Float Window]
    B -- "> 1024px (Desktop Wide)" --> E[Wide Docked Panel]
  
    C --> C1[Full-Screen Panel / Slide-up Overlay]
    D --> D1[Floating Chat Bubble Overlay]
    E --> E1[Docked Right Side Panel / Reflows App Width]
Agent界面必须支持响应式网页设计（RWD）。
主要响应模式：
text
Desktop Narrow
Desktop Wide
Mobile
mermaid
graph TD
    A[Screen Size / Trigger] --> B{Screen Width}
    B -- "< 768px (Mobile)" --> C[Mobile Mode]
    B -- "768px - 1024px (Tablet / Desktop Compact)" --> D[Compact Float Window]
    B -- "> 1024px (Desktop Wide)" --> E[Wide Docked Panel]
  
    C --> C1[Full-Screen Panel / Slide-up Overlay]
    D --> D1[Floating Chat Bubble Overlay]
    E --> E1[Docked Right Side Panel / Reflows App Width]

9. Desktop Narrow Layout

9. 窄屏桌面布局

On desktop with narrow available width:
Show the Agent as a Floating Action Button at the bottom-right when closed.
text
┌──────────────────────────────┐
│                              │
│       Main Application       │
│                              │
│                         [AI] │
└──────────────────────────────┘
The user can open or close the Chat View.
When opened, show a floating Agent Window.
The Agent Window should:
  • Remain above the main application.
  • Avoid covering critical application controls when possible.
  • Support resize.
  • Support close.
  • Preserve the current Session after closing.
在可用宽度较窄的桌面设备上：
关闭状态下，在右下角显示Agent悬浮操作按钮（Floating Action Button）。
text
┌──────────────────────────────┐
│                              │
│       Main Application       │
│                              │
│                         [AI] │
└──────────────────────────────┘
用户可打开或关闭聊天视图。
打开时，显示悬浮Agent窗口。
Agent窗口应：
  • 保持在主应用上方
  • 尽可能避免覆盖关键应用控件
  • 支持调整大小
  • 支持关闭
  • 关闭后保留当前会话

10. Desktop Wide Layout

10. 宽屏桌面布局

On desktop with wide available width:
When Chat View is open, display it as a full-height right-side panel.
text
┌───────────────────────────────┬──────────────┐
│                               │              │
│                               │    Agent     │
│       Main Application        │    Chat      │
│                               │    View      │
│                               │              │
└───────────────────────────────┴──────────────┘
Requirements:
  • Agent Panel is on the right-hand side.
  • Agent Panel uses full available height.
  • Main application uses the remaining width.
  • Main application content must not be hidden underneath the Agent.
  • The Agent Panel remains closable.
  • Closing the Agent returns it to the compact/FAB state.
  • Resizing may allow switching between floating and docked presentation.
在可用宽度较宽的桌面设备上：
聊天视图打开时，显示为右侧全高面板。
text
┌───────────────────────────────┬──────────────┐
│                               │              │
│                               │    Agent     │
│       Main Application        │    Chat      │
│                               │    View      │
│                               │              │
└───────────────────────────────┴──────────────┘
要求：
  • Agent面板位于右侧
  • Agent面板使用全部可用高度
  • 主应用使用剩余宽度
  • 主应用内容不得被Agent面板遮挡
  • Agent面板可关闭
  • 关闭Agent后返回紧凑/FAB状态
  • 调整大小可切换悬浮与停靠展示模式

11. Mobile Layout

11. 移动端布局

When closed:
text
┌──────────────────┐
│                  │
│ Main Application │
│                  │
│             [AI] │
└──────────────────┘
Show the Agent FAB at the bottom-right.
When opened:
text
┌──────────────────┐
│ Agent Toolbar    │
├──────────────────┤
│                  │
│                  │
│   Chat Messages  │
│                  │
│                  │
├──────────────────┤
│ Chat Input       │
└──────────────────┘
Use full-screen or near-full-screen Chat View.
Handle:
  • Safe-area inset
  • Mobile keyboard
  • Touch targets
  • Camera permission
  • Microphone permission
  • Back navigation
  • Close behavior
关闭状态下：
text
┌──────────────────┐
│                  │
│ Main Application │
│                  │
│             [AI] │
└──────────────────┘
在右下角显示Agent悬浮操作按钮。
打开状态下：
text
┌──────────────────┐
│ Agent Toolbar    │
├──────────────────┤
│                  │
│                  │
│   Chat Messages  │
│                  │
│                  │
├──────────────────┤
│ Chat Input       │
└──────────────────┘
使用全屏或接近全屏的聊天视图。
处理以下情况：
  • 安全区域内边距
  • 移动端键盘
  • 触摸目标
  • 相机权限
  • 麦克风权限
  • 返回导航
  • 关闭行为

12. Chat View Layout

12. 聊天视图布局

The Chat View contains:
text
┌──────────────────────────────────────┐
│              Top Toolbar             │
├──────────────────────────────────────┤
│                                      │
│             Chat Messages            │
│                                      │
│                                      │
│           Agent Activity             │
├──────────────────────────────────────┤
│ [+]       ___input___    [MIC][SEND] │
└──────────────────────────────────────┘
The general layout and control placement should remain recognizable across desktop and mobile.
聊天视图包含：
text
┌──────────────────────────────────────┐
│              Top Toolbar             │
├──────────────────────────────────────┤
│                                      │
│             Chat Messages            │
│                                      │
│                                      │
│           Agent Activity             │
├──────────────────────────────────────┤
│ [+]       ___input___    [MIC][SEND] │
└──────────────────────────────────────┘
通用布局和控件位置在桌面端和移动端应保持一致，便于识别。

13. Top Toolbar

13. 顶部工具栏

The Top Toolbar must provide:
text
[New Chat] [History] [Settings] [Resize] [Close]
Required actions:
  • New Chat
  • Chat History / Session History
  • Settings
  • Resize / Dock
  • Close
If horizontal space becomes crowded, lower-priority actions should move into an overflow/drop-down menu.
Example:
text
[New Chat]                  [⋮] [X]

[⋮]
 ├─ History
 ├─ Settings
 └─ Resize
Do not remove functionality merely because space is limited.
顶部工具栏必须提供：
text
[New Chat] [History] [Settings] [Resize] [Close]
必备操作：
  • 新建聊天
  • 聊天历史/会话历史
  • 设置
  • 调整大小/停靠
  • 关闭
当水平空间不足时，低优先级操作应移至溢出/下拉菜单。
示例：
text
[New Chat]                  [⋮] [X]

[⋮]
 ├─ History
 ├─ Settings
 └─ Resize
不得仅因空间有限而移除功能。

14. Bottom Toolbar

14. 底部工具栏

The bottom toolbar must use this conceptual structure:
text
[+]       ___input___       [MIC][SEND]
Do not replace this interaction model with unrelated layouts unless required by the host application's accessibility or platform constraints.
底部工具栏必须采用以下概念结构：
text
[+]       ___input___       [MIC][SEND]
除非宿主应用的可访问性或平台限制要求，否则不得用无关布局替换此交互模型。

15. 
[+]
Attachment Button

15. 
[+]
附件按钮

[+]
handles file / photo import.
When clicked, possible actions include:
text
[+]
 ├─ Upload File
 ├─ Upload Photo
 └─ Take Photo
Requirements:
  • Support multiple files at once.
  • Support multiple images at once.
  • When more than one import flow exists, show a dropdown / popover / action menu.
  • Hide unsupported import flows.
  • Show selected attachments before send.
  • Allow individual attachment removal.
[+]
处理文件/照片导入。
点击后，可能的操作包括：
text
[+]
 ├─ Upload File
 ├─ Upload Photo
 └─ Take Photo
要求：
  • 支持同时选择多个文件
  • 支持同时选择多张图片
  • 存在多种导入流程时，显示下拉菜单/弹出框/操作菜单
  • 隐藏不支持的导入流程
  • 发送前展示已选附件
  • 允许删除单个附件

16. 
[MIC]
Button

16. 
[MIC]
按钮

[MIC]
starts speech-to-text recording.
Behavior:
text
[MIC]
  ↓
Recording
  ↓
[STOP]
  ↓
Transcribing...
  ↓
Insert Text into Input
The recording must not automatically stop.
The user controls when recording ends.
The transcription result must return to:
text
___input___
so the user can correct mistakes before pressing 
[SEND]
.
[MIC]
启动语音转文字录制。
行为：
text
[MIC]
  ↓
Recording
  ↓
[STOP]
  ↓
Transcribing...
  ↓
Insert Text into Input
录制不得自动停止，由用户控制录制结束时间。
转录结果必须返回至：
text
___input___
以便用户点击
[SEND]
前纠正错误。

17. 
[SEND]
Button

17. 
[SEND]
按钮

[SEND]
sends the current message.
The message may include:
  • Text
  • Files
  • Images
  • Any combination supported by the provider/model
Disable 
[SEND]
when there is no valid content to send.
Show sending/loading state after submission.
[SEND]
发送当前消息。
消息可包含：
  • 文本
  • 文件
  • 图片
  • 提供商/模型支持的任意组合
无有效内容可发送时，禁用
[SEND]
按钮。
提交后显示发送/加载状态。

18. Agent Loading and Activity State

18. Agent加载与活动状态

The Chat View must contain a persistent Agent Activity area near the end of the conversation.
It must dynamically describe what the Agent is currently doing.
Minimum states:
text
Idle
Thinking
Running Tool
Long Task
Live Voice
Additional states may include:
text
Uploading
Transcribing
Generating
Planning
Waiting for Tool
Consolidating
Error
Example display:
text
◌ Thinking... 8s

⚙ Running tool: Search products... 3s

◌ Running task 2/5:
  Compare available options... 18s
When busy:
  • Show elapsed seconds.
  • Update elapsed time continuously.
  • Show current processing stage.
  • Show the human-readable Tool / Task name when available.
When idle:
  • Keep the activity indicator visible in a subdued state.
Do not create permanent chat messages for every temporary activity-state update.
If the user is near the bottom, activity changes may auto-scroll into view.
If the user is reading older messages, do not force-scroll.
聊天视图必须在对话末尾附近包含一个持久的Agent活动区域，动态描述Agent当前正在执行的操作。
最低要求的状态：
text
Idle
Thinking
Running Tool
Long Task
Live Voice
其他可能的状态包括：
text
Uploading
Transcribing
Generating
Planning
Waiting for Tool
Consolidating
Error
示例展示：
text
◌ Thinking... 8s

⚙ Running tool: Search products... 3s

◌ Running task 2/5:
  Compare available options... 18s
忙碌状态下：
  • 显示已耗时秒数
  • 持续更新耗时
  • 显示当前处理阶段
  • 可用时显示人类可读的工具/任务名称
空闲状态下：
  • 保持活动指示器可见，状态弱化
不得为每个临时活动状态更新创建永久聊天消息。
用户接近底部时，活动变化可自动滚动至视野内；用户查看历史消息时，不强制滚动。

19. Session Management

19. 会话管理

The Agent must support Session Management.
Required functions:
text
New Session
Save Current Session
Session History
Switch Session
Delete Session
Rename Session
Each Session should support:
  • Automatically generated title
  • Manual rename
  • Creation time
  • Last updated time
  • Conversation history
  • Attachment metadata when required
  • Relevant Agent context metadata when required
Example Session History:
text
Chat History

Today
────────────────────────
Product inventory question
10:42

Generate monthly report
09:18

Yesterday
────────────────────────
Customer service analysis
16:20
Opening a Session restores its conversation.
Closing and reopening the Agent must preserve the current Session.
Starting 
[New Chat]
creates a new Session.
Session persistence may use the application's existing storage architecture.
Possible storage includes:
  • localStorage
  • IndexedDB
  • Server-side database
  • Existing application persistence layer
Do not force a different persistence architecture when the host application already provides one.
Agent必须支持会话管理。
必备功能：
text
New Session
Save Current Session
Session History
Switch Session
Delete Session
Rename Session
每个会话应支持：
  • 自动生成标题
  • 手动重命名
  • 创建时间
  • 最后更新时间
  • 对话历史
  • 必要时的附件元数据
  • 必要时的相关Agent上下文元数据
会话历史示例：
text
Chat History

Today
────────────────────────
Product inventory question
10:42

Generate monthly report
09:18

Yesterday
────────────────────────
Customer service analysis
16:20
打开会话可恢复其对话内容。
关闭并重新打开Agent必须保留当前会话。
点击
[New Chat]
创建新会话。
会话持久化可使用应用现有的存储架构，可能的存储方式包括：
  • localStorage
  • IndexedDB
  • 服务端数据库
  • 现有应用持久化层
宿主应用已提供持久化架构时，不得强制使用不同的架构。

20. Long Task Support

20. 长任务支持

The Agent must support long or complex tasks that should not be handled as one oversized response.
Examples:
  • Large research tasks
  • Multi-source research
  • Large data processing
  • Long report generation
  • Tasks with many Tool calls
  • Multi-step application operations
  • Tasks expected to exceed a practical single-response context/output size
The Agent should be able to divide the request into ordered subtasks.
The decision to split a task should be made by the Agent/model based on complexity and scope.
Do not use frontend keyword matching to decide whether something is a long task.
Simple questions must not be unnecessarily converted into task plans.
Agent必须支持不应作为单一超大响应处理的长任务或复杂任务。
示例：
  • 大型研究任务
  • 多源研究
  • 大型数据处理
  • 长报告生成
  • 包含多次工具调用的任务
  • 多步骤应用操作
  • 预期超出实际单响应上下文/输出大小的任务
Agent应能将请求划分为有序子任务，是否拆分任务应由Agent/模型根据复杂度和范围决定。
不得使用前端关键词匹配来判断是否为长任务，简单问题不得不必要地转换为任务计划。

21. Long Task Planning

21. 长任务规划

Provide an internal long-task planning mechanism, such as:
text
planLongTasks
The implementation name may differ when required by the Agent framework, but the capability must exist.
A task plan contains:
text
Objective
Task 1
Task 2
Task 3
...
A reasonable default maximum is approximately 10 subtasks unless the application requires otherwise.
Each subtask should be independently bounded.
Each task execution should receive:
  • Overall objective
  • Current subtask
  • Necessary previous task results
  • Required runtime context
  • Available Tools
Avoid repeatedly sending unnecessary complete chat history into every subtask.
提供内部长任务规划机制，例如：
text
planLongTasks
Agent框架要求时，实现名称可不同，但必须具备该能力。
任务计划包含：
text
Objective
Task 1
Task 2
Task 3
...
合理默认最大子任务数约为10个，除非应用另有要求。
每个子任务应独立界定，执行时应接收：
  • 总体目标
  • 当前子任务
  • 必要的前期任务结果
  • 所需运行时上下文
  • 可用工具
避免在每个子任务中重复发送不必要的完整聊天历史。

22. Long Task Execution

22. 长任务执行

Long tasks execute sequentially or according to valid dependencies.
Each subtask may use:
  • Application Tools
  • Function Calling
  • Provider built-in tools
  • Web Search
  • Retrieval / RAG
  • Other Agent capabilities
A failed subtask must not automatically terminate unrelated remaining tasks.
Instead:
text
Task 1  ✓
Task 2  ✓
Task 3  ✕
Task 4  ✓
Continue when possible.
When all tasks finish:
  1. Consolidate successful results.
  2. Clearly identify failed or incomplete tasks.
  3. Produce a final response.
  4. Add the final response to the Chat View.
长任务按顺序或根据有效依赖关系执行。
每个子任务可使用：
  • 应用工具
  • 函数调用
  • 提供商内置工具
  • 网络搜索
  • 检索/RAG
  • 其他Agent能力
单个子任务失败不得自动终止无关的剩余任务，应尽可能继续执行：
text
Task 1  ✓
Task 2  ✓
Task 3  ✕
Task 4  ✓
所有任务完成后：
  1. 整合成功结果
  2. 明确标识失败或未完成任务
  3. 生成最终响应
  4. 将最终响应添加至聊天视图

23. Task Management Panel

23. 任务管理面板

When a long task exists, the Chat View must display a Task Management Panel.
Example:
text
┌──────────────────────────────────┐
│ Research competitor products     │
│ Running              2 / 5       │
│ ████████░░░░░░░░ 40%             │
├──────────────────────────────────┤
│ ✓ Search available products      │
│ ✓ Collect pricing                │
│ ◌ Compare specifications         │
│ ○ Analyze differences            │
│ ○ Generate final report          │
└──────────────────────────────────┘
Required overall states:
text
Running
Consolidating
Completed
Partially Failed
Each task must display a state:
text
Pending
Running
Done
Failed
Suggested visual mapping:
text
○ Pending
◌ Running
✓ Done
✕ Failed
Completed tasks should include a short result summary when useful.
存在长任务时，聊天视图必须显示任务管理面板。
示例：
text
┌──────────────────────────────────┐
│ Research competitor products     │
│ Running              2 / 5       │
│ ████████░░░░░░░░ 40%             │
├──────────────────────────────────┤
│ ✓ Search available products      │
│ ✓ Collect pricing                │
│ ◌ Compare specifications         │
│ ○ Analyze differences            │
│ ○ Generate final report          │
└──────────────────────────────────┘
必备的整体状态：
text
Running
Consolidating
Completed
Partially Failed
每个任务必须显示状态：
text
Pending
Running
Done
Failed
建议的视觉映射：
text
○ Pending
◌ Running
✓ Done
✕ Failed
实际可行时，已完成任务应包含简短结果摘要。

24. Task Panel Collapse / Expand

24. 任务面板折叠/展开

The Task Management Panel must support:
text
[Collapse]
[Expand]
Expanded state:
text
Research competitor products
Running 2 / 5
████████░░░░░░ 40%

✓ Search products
✓ Collect prices
◌ Compare products
○ Analyze differences
○ Generate report
Collapsed state:
text
Research competitor products
Running 2 / 5
████████░░░░░░ 40%
Even when collapsed, preserve:
  • Status
  • Completed / Total count
  • Progress bar
After completion, retain the Task Panel for review.
It may be cleared when the next independent user request or task plan begins.
任务管理面板必须支持：
text
[Collapse]
[Expand]
展开状态：
text
Research competitor products
Running 2 / 5
████████░░░░░░ 40%

✓ Search products
✓ Collect prices
◌ Compare products
○ Analyze differences
○ Generate report
折叠状态：
text
Research competitor products
Running 2 / 5
████████░░░░░░ 40%
即使折叠，也需保留：
  • 状态
  • 已完成/总数
  • 进度条
任务完成后，保留任务面板供查看，下一个独立用户请求或任务计划开始时可清除。

25. Quick Reply and Follow-up Actions

25. 快速回复与后续操作

The Agent can attach contextual follow-up actions to its responses.
Examples:
text
[Continue]
[Retry]
[View Result]
[Open Page]
[Apply Changes]
[Generate Report]
Follow-up actions should be generated from:
  • Tool results
  • Application context
  • Structured Agent output
  • Explicit UI configuration
Buttons must not promise actions that are unavailable.
Agent可在其响应中附加上下文相关的后续操作。
示例：
text
[Continue]
[Retry]
[View Result]
[Open Page]
[Apply Changes]
[Generate Report]
后续操作应从以下内容生成：
  • 工具结果
  • 应用上下文
  • 结构化Agent输出
  • 显式UI配置
按钮不得承诺不可用的操作。

26. Chat View Setup

26. 聊天视图设置

The Agent must provide a Settings panel.
The required conceptual setup layout is:
text
API KEY
[____________________________] [Save]

Model
[Model Drop Down List        ] [Refresh]

Other Model
[Other Model Drop Down List  ]

Other Model Settings
[...]

System Prompt
[                              ]
[                              ]
[                              ]

Built-in Tools
[✓] Web / Google Search
[ ] Code Execution
[ ] Other Provider Tool
These explicit actions must not be abstracted away.
Agent必须提供设置面板，所需的概念性设置布局如下：
text
API KEY
[____________________________] [Save]

Model
[Model Drop Down List        ] [Refresh]

Other Model
[Other Model Drop Down List  ]

Other Model Settings
[...]

System Prompt
[                              ]
[                              ]
[                              ]

Built-in Tools
[✓] Web / Google Search
[ ] Code Execution
[ ] Other Provider Tool
不得抽象掉这些显式操作。

27. API KEY 
[Save]

27. API KEY 
[Save]

The API Key field must have an explicit 
[Save]
button.
text
API KEY
[____________________________] [Save]
Required flow:
text
Enter API Key
      ↓
    [Save]
      ↓
Checking availability...
      ↓
 ┌───────────────┐
 │ Valid         │
 │ Invalid       │
 └───────────────┘
When 
[Save]
is clicked:
  1. Enter loading state.
  2. Validate the API Key / authentication against the selected provider.
  3. Confirm that the provider API is reachable.
  4. Display success or failure.
  5. Save the configuration only when the validation succeeds.
  6. Preserve the previous valid configuration if the new key fails validation.
Possible UI states:
text
API KEY
[****************************] [Save]
✓ Connected
or
text
API KEY
[____________________________] [Save]
✕ Invalid API Key
Do not silently save API Key changes on:
  • Blur
  • Field change
  • Settings panel close
The explicit 
[Save]
action is required.
Saved secrets must not be displayed in full.
Production credential storage must follow the security model of the host application.
API Key字段必须有显式的
[Save]
按钮：
text
API KEY
[____________________________] [Save]
必备流程：
text
Enter API Key
      ↓
    [Save]
      ↓
Checking availability...
      ↓
 ┌───────────────┐
 │ Valid         │
 │ Invalid       │
 └───────────────┘
点击
[Save]
时：
  1. 进入加载状态
  2. 针对选中提供商验证API Key/身份认证
  3. 确认提供商API可访问
  4. 显示成功或失败状态
  5. 仅验证成功时保存配置
  6. 新Key验证失败时保留之前的有效配置
可能的UI状态：
text
API KEY
[****************************] [Save]
✓ Connected
或
text
API KEY
[____________________________] [Save]
✕ Invalid API Key
不得在以下情况时静默保存API Key更改：
  • 字段失焦
  • 字段内容变更
  • 设置面板关闭
必须使用显式的
[Save]
操作。
已保存的密钥不得完整显示，生产环境凭据存储必须遵循宿主应用的安全模型。

28. Model Drop Down List 
[Refresh]

28. 模型下拉列表 
[Refresh]

The primary model selector must have an explicit 
[Refresh]
button.
text
Model
[Model Drop Down List ▼] [Refresh]
The model list should be dynamically loaded from the provider whenever the API supports model discovery.
Do not rely only on hard-coded model names.
Required behavior:
主模型选择器必须有显式的
[Refresh]
按钮：
text
Model
[Model Drop Down List ▼] [Refresh]
API支持模型发现时，模型列表应从提供商动态加载，不得仅依赖硬编码的模型名称。
必备行为：

Manual Refresh

手动刷新

Click:
text
[Refresh]
to retrieve the latest model list.
During refresh:
text
Model
[Loading models...      ] [Refresh]
点击：
text
[Refresh]
获取最新模型列表。
刷新期间：
text
Model
[Loading models...      ] [Refresh]

API Key Changed

API Key变更

After a new API Key is successfully saved:
text
API Key Changed
      ↓
Validate API Key
      ↓
Validation Success
      ↓
Automatically Refresh Model List
Automatic refresh does not remove the manual 
[Refresh]
button.
新API Key成功保存后：
text
API Key Changed
      ↓
Validate API Key
      ↓
Validation Success
      ↓
Automatically Refresh Model List
自动刷新不移除手动
[Refresh]
按钮。

Model Preservation

模型保留

After refresh:
  • Keep the current model selected if it is still available.
  • If the model is no longer available, select or request a valid replacement.
  • Clearly show model-list loading errors.
刷新后：
  • 当前模型仍可用时，保持选中状态
  • 当前模型不可用时，选择或请求有效的替代模型
  • 清晰显示模型列表加载错误

29. Other Model Drop Down Lists

29. 其他模型下拉列表

Support additional model selectors when different Agent capabilities require different models.
Examples:
text
Chat Model
[Model ▼] [Refresh]

Speech-to-Text Model
[Model ▼]

Realtime Voice Model
[Model ▼]

Embedding Model
[Model ▼]

Vision Model
[Model ▼]
Only show additional model selectors that are relevant to the current provider and enabled capabilities.
Do not create unnecessary selectors when one model handles all required capabilities.
When authentication changes, dependent model lists should refresh as required.
不同Agent能力需要不同模型时，支持额外的模型选择器。
示例：
text
Chat Model
[Model ▼] [Refresh]

Speech-to-Text Model
[Model ▼]

Realtime Voice Model
[Model ▼]

Embedding Model
[Model ▼]

Vision Model
[Model ▼]
仅显示与当前提供商和已启用能力相关的额外模型选择器，单个模型可处理所有所需能力时，不得创建不必要的选择器。
身份认证变更时，相关模型列表应按需刷新。

30. Other Model Settings

30. 其他模型设置

Provide model settings supported by the selected model/provider.
Possible settings include:
text
Temperature
Maximum Output Tokens
Reasoning Level
Top P
Streaming
Structured Output
Voice
Response Modality
Other Provider-Specific Settings
Only display settings that are actually supported.
Model settings should update when the selected model changes.
提供选中模型/提供商支持的模型设置，可能的设置包括：
text
Temperature
Maximum Output Tokens
Reasoning Level
Top P
Streaming
Structured Output
Voice
Response Modality
Other Provider-Specific Settings
仅显示实际支持的设置，选中模型变更时，模型设置应更新。

31. System Prompt

31. 系统提示词

Provide an editable System Prompt field.
text
System Prompt

┌──────────────────────────────────┐
│                                  │
│                                  │
│                                  │
└──────────────────────────────────┘
System Prompt configuration should remain separate from automatically injected runtime application context.
The implementation may compose:
text
Base Agent Instructions
+
User-configurable System Prompt
+
Runtime Application Context
The user should not need to manually copy current application state into the System Prompt.
提供可编辑的系统提示词字段：
text
System Prompt

┌──────────────────────────────────┐
│                                  │
│                                  │
│                                  │
└──────────────────────────────────┘
系统提示词配置应与自动注入的运行时应用上下文分离，实现可组合：
text
Base Agent Instructions
+
User-configurable System Prompt
+
Runtime Application Context
用户无需手动将当前应用状态复制到系统提示词中。

32. Built-in Provider Tools

32. 提供商内置工具

Allow supported provider-native tools to be enabled or disabled.
Example:
text
Built-in Tools

[✓] Google Search
[ ] Code Execution
[ ] File Search
[ ] URL Context
For Gemini, this may include:
text
Google Search
Code Execution
URL Context
For other providers, display equivalent provider-native capabilities.
The list must be capability-driven.
Do not display unsupported provider tools.
Provider-native tools and application-defined Custom Tools / Function Calls are separate concepts.
允许启用或禁用支持的提供商原生工具。
示例：
text
Built-in Tools

[✓] Google Search
[ ] Code Execution
[ ] File Search
[ ] URL Context
对于Gemini，可能包括：
text
Google Search
Code Execution
URL Context
对于其他提供商，显示等效的提供商原生能力，列表必须基于能力驱动，不得显示不支持的提供商工具。
提供商原生工具与应用定义的自定义工具/函数调用是独立概念。

33. Settings Dependency Flow

33. 设置依赖流程

Settings should update dependent capabilities automatically.
text
API KEY
  ↓
[Save]
  ↓
Validate
  ↓
Connected
  ↓
Refresh Models
  ↓
Select Model
  ↓
Detect Model Capabilities
  ↓
Refresh:
- Other Models
- Model Settings
- Built-in Tools
- File Support
- Image Support
- Speech Support
- Other Agent Capabilities
The Agent UI should therefore react to authentication and model changes instead of treating settings as unrelated static fields.
设置应自动更新相关能力：
text
API KEY
  ↓
[Save]
  ↓
Validate
  ↓
Connected
  ↓
Refresh Models
  ↓
Select Model
  ↓
Detect Model Capabilities
  ↓
Refresh:
- Other Models
- Model Settings
- Built-in Tools
- File Support
- Image Support
- Speech Support
- Other Agent Capabilities
因此，Agent UI应响应身份认证和模型变更，而非将设置视为无关的静态字段。

34. Capability Detection

34. 能力检测

Agent controls must reflect actual provider/model/browser capabilities.
Possible capabilities include:
  • Text
  • Streaming
  • File Input
  • Image Input
  • Camera Input
  • Speech-to-Text
  • Realtime Voice
  • Tool Use
  • Function Calling
  • Web Search
  • File Search
  • Retrieval
  • Code Execution
  • Structured Output
  • Other provider-native capabilities
typescript
interface ModelCapabilities {
  supportsStreaming: boolean;
  supportsImageInput: boolean;
  supportsFileInput: boolean; // CSV, PDF, XLSX, etc.
  supportsAudioInput: boolean;
  supportsRealtimeVoice: boolean;
  supportsToolUse: boolean;
  supportedFileExtensions: string[];
}

interface ProviderAdapter {
  getCapabilities(modelName: string): ModelCapabilities;
  generateContentStream(request: GenerateRequest): AsyncIterable<GenerateResponse>;
  executeTool(name: string, args: Record<string, any>): Promise<any>;
}
When unsupported:
  • Hide the feature if irrelevant.
  • Disable it with an explanation if the user should know it exists.
  • Provide fallback behavior where practical.
Agent控件必须反映实际的提供商/模型/浏览器能力，可能的能力包括：
  • Text
  • Streaming
  • File Input
  • Image Input
  • Camera Input
  • Speech-to-Text
  • Realtime Voice
  • Tool Use
  • Function Calling
  • Web Search
  • File Search
  • Retrieval
  • Code Execution
  • Structured Output
  • Other provider-native capabilities
typescript
interface ModelCapabilities {
  supportsStreaming: boolean;
  supportsImageInput: boolean;
  supportsFileInput: boolean; // CSV, PDF, XLSX, etc.
  supportsAudioInput: boolean;
  supportsRealtimeVoice: boolean;
  supportsToolUse: boolean;
  supportedFileExtensions: string[];
}

interface ProviderAdapter {
  getCapabilities(modelName: string): ModelCapabilities;
  generateContentStream(request: GenerateRequest): AsyncIterable<GenerateResponse>;
  executeTool(name: string, args: Record<string, any>): Promise<any>;
}
不支持时：
  • 无关功能隐藏
  • 用户应知晓存在的功能需禁用并给出说明
  • 实际可行时提供回退行为

35. Tool / Function Calling Integration

35. 工具/函数调用集成

During development, inspect the existing application and identify functions that should be exposed to the Agent as Tools / Function Calls.
The Agent is expected to do more than answer questions when the application has useful executable capabilities.
Recommend or implement a Tool when the Agent needs to:
  • Read application data
  • Search application records
  • Retrieve current application state
  • Create data
  • Update data
  • Delete data
  • Generate reports
  • Save generated results
  • Navigate to a specific application state
  • Execute an existing application action
  • Coordinate several application operations
  • Perform a multi-step workflow
  • Run RAG or internal search
  • Trigger external services through the application
开发期间，检查现有应用并确定应作为工具/函数调用暴露给Agent的函数。
应用具备有用的可执行能力时，Agent应能执行更多操作，而非仅回答问题。
Agent需要以下操作时，建议或实现工具：
  • 读取应用数据
  • 搜索应用记录
  • 获取当前应用状态
  • 创建数据
  • 更新数据
  • 删除数据
  • 生成报告
  • 保存生成结果
  • 导航到特定应用状态
  • 执行现有应用操作
  • 协调多个应用操作
  • 执行多步骤工作流
  • 运行RAG或内部搜索
  • 通过应用触发外部服务

36. Do Not Replace Simple UI with Chat

36. 勿用聊天替代简单UI

Do not convert every existing application feature into Agent interaction.
Prefer existing traditional UI for operations that are:
  • Simple
  • Predictable
  • High frequency
  • Easier with a button
  • Easier with a form
  • Easier with a menu
  • Easier with direct manipulation
Prefer Agent / Tool interaction for operations involving:
  • Natural-language intent
  • Ambiguous requests
  • Cross-feature workflows
  • Multi-step work
  • Data aggregation
  • Context-dependent operations
  • Complex search
  • Repetitive administrative workflows
The Agent complements the existing application UI.
It does not replace the application's primary interaction model.
勿将每个现有应用功能转换为Agent交互，以下操作优先使用现有传统UI：
  • 简单操作
  • 可预测操作
  • 高频操作
  • 点击按钮更便捷的操作
  • 使用表单更便捷的操作
  • 使用菜单更便捷的操作
  • 直接操作更便捷的操作
以下操作优先使用Agent/工具交互：
  • 自然语言意图
  • 模糊请求
  • 跨功能工作流
  • 多步骤工作
  • 数据聚合
  • 依赖上下文的操作
  • 复杂搜索
  • 重复性管理工作流
Agent是现有应用UI的补充，而非替代应用的主交互模型。

37. Tool Definition

37. 工具定义

Each application Tool should define:
text
name
description
parameters / input schema
return type / output schema
handler
error handling
Recommended additional metadata:
text
user-facing label
activity label
permission requirement
confirmation requirement
Tool names should normally use verbs.
Examples:
text
searchProducts
getProductDetails
createReport
updateTask
deleteItem
navigateToRecord
saveDocument
每个应用工具应定义：
text
name
description
parameters / input schema
return type / output schema
handler
error handling
推荐的额外元数据：
text
user-facing label
activity label
permission requirement
confirmation requirement
工具名称通常使用动词，示例：
text
searchProducts
getProductDetails
createReport
updateTask
deleteItem
navigateToRecord
saveDocument

38. Tool Execution UI

38. 工具执行UI

When an Agent invokes a Tool, Agent Activity must reflect the operation.
Example:
text
⚙ Searching inventory...
instead of exposing only:
text
running searchProducts()
Use a human-readable activity label.
If multiple Tool rounds occur, the UI should continue updating the same Agent Activity area rather than generating excessive system messages.
Agent调用工具时，Agent活动状态必须反映该操作。
示例：
text
⚙ Searching inventory...
而非仅显示：
text
running searchProducts()
使用人类可读的活动标签，若存在多轮工具调用，UI应持续更新同一Agent活动区域，而非生成过多系统消息。

39. Tool Execution Integrity

39. 工具执行完整性

The Agent must not claim an application operation succeeded unless the real Tool handler returned success.
Required flow:
text
Agent decides to execute action
        ↓
Call Tool
        ↓
Application handler executes
        ↓
Tool returns result
        ↓
Application state updates
        ↓
Agent reports confirmed result
For state-changing operations, the actual application state is the source of truth.
Do not simulate success through Agent text.
除非实际工具处理器返回成功，否则Agent不得声称应用操作成功。
必备流程：
text
Agent decides to execute action
        ↓
Call Tool
        ↓
Application handler executes
        ↓
Tool returns result
        ↓
Application state updates
        ↓
Agent reports confirmed result
对于状态变更操作，实际应用状态是事实来源，不得通过Agent文本模拟成功。

40. Application Context

40. 应用上下文

Provide relevant current application context to the Agent when needed.
Possible context includes:
  • Current route
  • Current page
  • Current selected item
  • Current filters
  • Current form state
  • Visible records
  • Current user permissions
  • Available actions
  • Relevant business state
Do not send irrelevant application data merely because it exists.
必要时向Agent提供相关的当前应用上下文，可能的上下文包括：
  • 当前路由
  • 当前页面
  • 当前选中项
  • 当前筛选器
  • 当前表单状态
  • 可见记录
  • 当前用户权限
  • 可用操作
  • 相关业务状态
不得仅因数据存在就发送无关的应用数据。

41. Architecture Separation

41. 架构分离

Keep the Agent UI reusable.
Recommended responsibility separation:
text
Agent Components
    ↓
Agent UI / interaction

Agent State
    ↓
Chat / Session / Task / Activity state

Agent Provider Service
    ↓
Model API communication

Tool Service
    ↓
Function registration and execution

Repository / Persistence
    ↓
Session and settings persistence

Provider Adapter
    ↓
Provider-specific capability mapping
LayerResponsibility
Agent Componentsvisual presentation (visual message list, bubbles, headers, composers, FAB, settings UI)
Agent Stateinteraction behavior (handles IME listeners, composer heights, state mappings, file selection handlers)
Agent Provider Servicemodel and API communication
Tool ServiceTool registration and execution
Repository / Persistencesession and settings persistence
Provider Adapterprovider-specific capability mapping
Reuse the host application's existing:
  • Component system
  • State management
  • Styling
  • Routing
  • Persistence
  • API architecture
Do not introduce a new application framework solely to support the Agent.
保持Agent UI可复用，建议的职责分离：
text
Agent Components
    ↓
Agent UI / interaction

Agent State
    ↓
Chat / Session / Task / Activity state

Agent Provider Service
    ↓
Model API communication

Tool Service
    ↓
Function registration and execution

Repository / Persistence
    ↓
Session and settings persistence

Provider Adapter
    ↓
Provider-specific capability mapping
层级职责
Agent Components视觉展示（可视化消息列表、气泡、标题栏、输入框、FAB、设置UI）
Agent State交互行为（处理IME监听器、输入框高度、状态映射、文件选择处理器）
Agent Provider Service模型与API通信
Tool Service工具注册与执行
Repository / Persistence会话与设置持久化
Provider Adapter提供商特定能力映射
复用宿主应用现有的：
  • 组件系统
  • 状态管理
  • 样式
  • 路由
  • 持久化
  • API架构
不得仅为支持Agent而引入新的应用框架。

42. Minimum Acceptance Criteria

42. 最低验收标准

The Agent UI is complete only when all applicable requirements below pass.
仅当以下所有适用要求通过时，Agent UI才视为完整。

Chat UI

聊天UI

  • Chat View can open and close.
  • Desktop narrow layout supports bottom-right FAB.
  • Desktop wide layout supports full-height right-side panel.
  • Mobile open state supports full-screen / near-full-screen Chat View.
  • Message Bubble layout works.
  • Markdown renders correctly.
  • Quick Reply works.
  • Agent Loading state is visible.
  • Agent Activity is visible.
  • 聊天视图可打开和关闭
  • 窄屏桌面布局支持右下角FAB
  • 宽屏桌面布局支持右侧全高面板
  • 移动端打开状态支持全屏/接近全屏聊天视图
  • 消息气泡布局正常工作
  • Markdown正确渲染
  • 快速回复正常工作
  • Agent加载状态可见
  • Agent活动状态可见

Input

输入

  • [+] ___input___ [MIC][SEND]
    interaction is preserved.
  • Text Input supports multiline.
  • Enter sends.
  • Shift + Enter creates newline.
  • IME composition does not accidentally send.
  • Multiple files can be selected.
  • Multiple attachments can be removed individually.
  • Photos can be uploaded.
  • Camera capture works when supported.
  • 保留
    [+] ___input___ [MIC][SEND]
    交互模式
  • 文本输入框支持多行
  • Enter键发送消息
  • Shift + Enter换行
  • IME组合输入不会意外发送消息
  • 可选择多个文件
  • 可单独删除多个附件
  • 可上传照片
  • 支持时相机拍摄功能正常

Speech-to-Text

语音转文字

  • [MIC]
    starts recording.
  • Recording does not automatically stop.
  • User manually stops recording.
  • Transcription loading is shown.
  • Transcription returns to the editable Chat Input.
  • Transcription is not automatically sent.
  • [MIC]
    启动录制
  • 录制不会自动停止
  • 用户手动停止录制
  • 显示转录加载状态
  • 转录结果返回至可编辑的聊天输入框
  • 转录结果不会自动发送

Session

会话

  • [New Chat]
    creates a new Session.
  • Session history can be opened.
  • Historical Sessions can be switched.
  • Session can be renamed.
  • Session can be deleted.
  • Session titles can be automatically generated.
  • Creation / update time is retained.
  • Closing the Agent preserves the current Session.
  • [New Chat]
    创建新会话
  • 可打开会话历史
  • 可切换历史会话
  • 可重命名会话
  • 可删除会话
  • 可自动生成会话标题
  • 保留创建/更新时间
  • 关闭Agent后保留当前会话

Long Tasks

长任务

  • Agent can determine when a request should become a long task.
  • Long tasks can be divided into subtasks.
  • Simple requests are not unnecessarily split.
  • Individual task failure does not automatically abort unrelated tasks.
  • Final results are consolidated after execution.
  • Agent可判断请求何时应转为长任务
  • 长任务可划分为子任务
  • 简单请求不会被不必要拆分
  • 单个任务失败不会自动终止无关任务
  • 执行完成后整合最终结果

Task Management Panel

任务管理面板

  • Overall status is visible.
  • Completed / Total
    is visible.
  • Progress bar is visible.
  • Pending / Running / Done / Failed states are visible.
  • Completed tasks may show summaries.
  • Panel supports collapse / expand.
  • Collapsed state still shows status, count, and progress.
  • 整体状态可见
  • 已完成/总数可见
  • 进度条可见
  • 待处理/运行中/已完成/失败状态可见
  • 已完成任务可显示摘要
  • 面板支持折叠/展开
  • 折叠状态仍显示状态、数量和进度

Agent Activity

Agent活动

  • Idle state exists.
  • Thinking state exists.
  • Running Tool state exists.
  • Long Task state exists.
  • Busy states show elapsed time.
  • Tool / Task activity uses readable names.
  • Activity updates do not pollute permanent chat history.
  • Auto-scroll does not interrupt users reading older messages.
  • 存在空闲状态
  • 存在思考状态
  • 存在运行工具状态
  • 存在长任务状态
  • 忙碌状态显示耗时
  • 工具/任务活动使用可读名称
  • 活动更新不会污染永久聊天历史
  • 自动滚动不会打断用户查看历史消息

Settings

设置

The following explicit controls must exist:
text
API KEY [Save]

Model Drop Down List [Refresh]

Other Model Drop Down Lists

Other Model Settings

System Prompt

Enable / Disable Built-in Tools
  • [Save]
    validates API availability before accepting a new API Key.
  • Invalid keys are not treated as saved valid credentials.
  • Successful API Key change automatically refreshes Model options.
  • [Refresh]
    manually refreshes the Model list.
  • Model list is dynamic when provider discovery exists.
  • Other model lists appear when required.
  • Model-specific settings reflect current capabilities.
  • System Prompt is editable.
  • Provider built-in tools can be configured when the provider exposes them.
必须存在以下显式控件：
text
API KEY [Save]

Model Drop Down List [Refresh]

Other Model Drop Down Lists

Other Model Settings

System Prompt

Enable / Disable Built-in Tools
  • [Save]
    在接受新API Key前验证API可用性
  • 无效Key不会被视为已保存的有效凭据
  • API Key变更成功后自动刷新模型选项
  • [Refresh]
    手动刷新模型列表
  • 提供商支持发现时，模型列表动态生成
  • 需要时显示其他模型列表
  • 模型特定设置反映当前能力
  • 系统提示词可编辑
  • 提供商暴露内置工具时可配置

Tools

工具

  • Application functions suitable for Agent interaction are identified.
  • Relevant functions are exposed as Tools / Function Calls.
  • Tool execution uses actual application handlers.
  • Tool errors are displayed clearly.
  • Agent does not falsely claim Tool success.
  • Chat, long tasks, and other Agent interaction modes reuse the same Tool handlers whenever practical.
  • 识别出适合Agent交互的应用函数
  • 相关函数作为工具/函数调用暴露
  • 工具执行使用实际应用处理器
  • 工具错误清晰显示
  • Agent不会虚假声称工具执行成功
  • 聊天、长任务和其他Agent交互模式尽可能复用相同工具处理器

43. Core Design Principle

43. 核心设计原则

The resulting experience should feel like:
text
Existing Web Application
        +
Reusable AI Agent Assistance
        +
Application-aware Tools
not:
text
Chatbot replacing the entire application
The Agent should be easy to discover, easy to open, easy to dismiss, aware of the application's current context, capable of operating the application through real Tools, and capable of clearly exposing its current state when work takes more than a normal conversational turn.
最终体验应呈现为：
text
Existing Web Application
        +
Reusable AI Agent Assistance
        +
Application-aware Tools
而非：
text
Chatbot replacing the entire application
Agent应易于发现、打开和关闭，知晓应用当前上下文，能够通过真实工具操作应用，且工作耗时超过正常对话轮次时，能够清晰暴露其当前状态。