feat: 前端新增agent助手tab

[YunaElyne]

变更内容

• 新功能
• 修复 Bug
• 增强重构
• 其他（请描述）

简要描述本次 PR 的主要变更内容。

相关 Issue

请关联相关 Issue（如有）：#编号

检查清单

默认已勾选，如不满足，请检查。

• 已在本地测试通过
• 已补充/更新相关文档
• 已添加测试用例
• 代码风格已经过 pre-commit 钩子检查

其他说明

如有特殊说明或注意事项，请补充。

Sourcery 摘要

在 Xyzen 用户界面中引入一个辅助助手标签页，通过添加新的 XyzenAgent 组件并将其注册为标签页，供用户浏览和选择预定义代理。

新功能：

• 在 Xyzen 主界面中添加一个新的“代理”标签页，用于访问辅助助手
• 实现 XyzenAgent 组件，以卡片形式显示预定义代理列表，卡片内容包括名称、描述、头像、标签和模型
• 通过 AgentCard 交互启用代理选择功能

Original summary in English

Summary by Sourcery

Introduce an assistant helper tab in the Xyzen UI by adding a new XyzenAgent component and registering it as a tab for users to browse and select predefined agents.

New Features:

• Add a new "agent" tab in the main Xyzen interface for accessing the assistant helper
• Implement XyzenAgent component to display a list of predefined agents with cards showing name, description, avatar, tags, and model
• Enable selection of agents via AgentCard interaction

[sourcery-ai]

审阅者指南

此拉取请求（PR）通过将新创建的 XyzenAgent 组件集成到主布局中，并在该组件中实现可选择的预定义助手代理列表的显示，从而在 Xyzen 前端引入了一个新的“助手”选项卡。

新 Agent 类型和 XyzenAgent 组件的类图

classDiagram
    class Agent {
      +string id
      +string name
      +string description
      +string avatar
      +string[] tags
      +string model
      +number temperature
    }
    class AgentCard {
      +Agent agent
      +onClick(agent: Agent)
      +selected: boolean
    }
    class XyzenAgent {
      +selectedAgentId: string | null
      +handleAgentClick(agent: Agent)
    }
    AgentCard --> Agent : uses
    XyzenAgent --> AgentCard : renders
    XyzenAgent --> Agent : uses

Loading

文件级变更

| 变更 | 详情 ```

Original review guide in English

Reviewer's Guide

This PR introduces a new “助手” tab in the Xyzen front-end by integrating a newly created XyzenAgent component into the main layout and implementing that component to display a selectable list of predefined assistant agents.

Class diagram for the new Agent type and XyzenAgent component

classDiagram
    class Agent {
      +string id
      +string name
      +string description
      +string avatar
      +string[] tags
      +string model
      +number temperature
    }
    class AgentCard {
      +Agent agent
      +onClick(agent: Agent)
      +selected: boolean
    }
    class XyzenAgent {
      +selectedAgentId: string | null
      +handleAgentClick(agent: Agent)
    }
    AgentCard --> Agent : uses
    XyzenAgent --> AgentCard : renders
    XyzenAgent --> Agent : uses

Loading

File-Level Changes

Change	Details	Files
Add ‘助手’ tab integration in main App layout	Imported XyzenAgent component Appended agent tab entry to tabs array	web/src/app/App.tsx
Add commented-out stub for custom agent creation	Introduced handleCreateCustomAgent function skeleton Left code for creating and selecting a new agent commented out	web/src/app/App.tsx
Create XyzenAgent component to render agent cards	Defined static agents list and Agent type Built AgentCard for avatar, name, description, tags, selection state Implemented XyzenAgent component with selection state and click handler	web/src/components/layouts/XyzenAgent.tsx

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

嗨 @YunaElyne - 我已审阅了你的更改 - 以下是一些反馈：

• 你留下了大块注释掉的代码（在 App.tsx 和 XyzenAgent.tsx 中），这些代码尚未使用——考虑删除或将其提取到单独的功能分支中，以使 PR 保持专注。
• AgentCard 目前硬编码了头像 URL——将其替换为 agent.avatar 属性，以便每张卡片都能渲染其正确的图像。
• 点击代理仅切换 UI 状态，但未调用 createDefaultChannel 或更改选项卡索引——取消注释并连接存储操作和选项卡切换，以便选择代理后实际打开聊天。

AI 代理的提示

请处理此代码审查中的评论：
## 总体评论
- 你留下了大块注释掉的代码（在 App.tsx 和 XyzenAgent.tsx 中），这些代码尚未使用——考虑删除或将其提取到单独的功能分支中，以使 PR 保持专注。
- AgentCard 目前硬编码了头像 URL——将其替换为 agent.avatar 属性，以便每张卡片都能渲染其正确的图像。
- 点击代理仅切换 UI 状态，但未调用 createDefaultChannel 或更改选项卡索引——取消注释并连接存储操作和选项卡切换，以便选择代理后实际打开聊天。

## 单个评论

### 评论 1
<location> `web/src/components/layouts/XyzenAgent.tsx:85` </location>
<code_context>
+        `}
+    >
+      {/* 头像 */}
+      <img
+        src='https://cdn1.deepmd.net/static/img/affb038eChatGPT Image 2025年8月6日 10_33_07.png'
+        alt={agent.name}
+        className="h-10 w-10 rounded-full object-cover border border-white/30 shadow-sm"
</code_context>

<issue_to_address>
代理头像被硬编码，而不是使用 agent.avatar 属性。

更新 src 属性以使用 agent.avatar，以便显示每个代理的唯一头像。
</issue_to_address>

---

Sourcery 对开源免费 - 如果你喜欢我们的评论，请考虑分享它们 ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{帮助我更有用！请点击 👍 或 👎 对每个评论进行评价，我将利用这些反馈来改进你的评论。}

Original comment in English

Hey @YunaElyne - I've reviewed your changes - here's some feedback:

• You’ve left large blocks of commented‐out code (both in App.tsx and XyzenAgent.tsx) that aren’t used yet—consider removing or extracting these into separate feature branches to keep the PR focused.
• AgentCard currently hardcodes the avatar URL—swap it out for the agent.avatar property so each card renders its correct image.
• Clicking an agent only toggles the UI state, but doesn’t call createDefaultChannel or change the tab index—uncomment and wire up the store action and tab switch so selecting an agent actually opens a chat.

Prompt for AI Agents

Please address the comments from this code review:
## Overall Comments
- You’ve left large blocks of commented‐out code (both in App.tsx and XyzenAgent.tsx) that aren’t used yet—consider removing or extracting these into separate feature branches to keep the PR focused.
- AgentCard currently hardcodes the avatar URL—swap it out for the agent.avatar property so each card renders its correct image.
- Clicking an agent only toggles the UI state, but doesn’t call createDefaultChannel or change the tab index—uncomment and wire up the store action and tab switch so selecting an agent actually opens a chat.

## Individual Comments

### Comment 1
<location> `web/src/components/layouts/XyzenAgent.tsx:85` </location>
<code_context>
+        `}
+    >
+      {/* 头像 */}
+      <img
+        src='https://cdn1.deepmd.net/static/img/affb038eChatGPT Image 2025年8月6日 10_33_07.png'
+        alt={agent.name}
+        className="h-10 w-10 rounded-full object-cover border border-white/30 shadow-sm"
</code_context>

<issue_to_address>
Agent avatar is hardcoded instead of using agent.avatar property.

Update the src attribute to use agent.avatar so each agent's unique avatar is displayed.
</issue_to_address>

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[sourcery-ai]

issue: 代理头像被硬编码，而不是使用 agent.avatar 属性。

更新 src 属性以使用 agent.avatar，以便显示每个代理的唯一头像。

Original comment in English

issue: Agent avatar is hardcoded instead of using agent.avatar property.

Update the src attribute to use agent.avatar so each agent's unique avatar is displayed.