feat: redesign project AI agent page

apps/web_v1/src/pages/projects/project-ai.tsx

@@ -1,70 +1,87 @@
-import { Avatar, Button, Card, Input, Space, Tag, Typography } from '@arco-design/web-react'
-import { IconPlus, IconRobot, IconSend } from '@arco-design/web-react/icon'
-import type { ProjectWorkspace } from './project-types'
+import { Button, Card, Input, Space, Typography } from '@arco-design/web-react'
+import {
+  IconArrowUp,
+  IconAttachment,
+  IconPlusCircle,
+  IconRobot,
+} from '@arco-design/web-react/icon'
+import type { AISession, ProjectWorkspace } from './project-types'
 
-const { Title, Text, Paragraph } = Typography
-
-const messages = [
-  { role: 'user', text: '请基于当前项目资料，整理本周风险和推进建议。' },
-  { role: 'assistant', text: '我建议优先处理导出问题、权限边界和 Q3 策略评审，并把客户反馈同步到工作计划。' },
-  { role: 'user', text: '把建议拆成可执行任务。' },
-]
+const { Title, Text } = Typography
 
 export function ProjectAi({ activeWorkspace, onSelectItem }: { activeWorkspace: ProjectWorkspace; onSelectItem: (title: string) => void }) {
   const { aiSessions, project } = activeWorkspace
-  const selected = aiSessions[0]
+  const groupedSessions = groupSessions(aiSessions)
 
   return (
     <div className="project-channel-page project-ai-page overview-page">
       <div className="overview-head">
         <div>
-          <Title heading={4}>AI 会话</Title>
-          <Text type="secondary">{project.name} 的项目内 AI session，左侧会话列表，右侧对话详情。</Text>
+          <Title heading={4}>AI智能体</Title>
+          <Text type="secondary">{project.name} 的项目内智能体工作台，选择专家后开始上下文对话。</Text>
         </div>
-        <Button type="primary" icon={<IconPlus />}>新建会话</Button>
       </div>
 
-      <div className="ai-workspace">
-        <Card className="ai-session-list queue-section" bordered>
-          <div className="section-header">
-            <Title heading={6}>Session</Title>
-            <Tag color="purple">{aiSessions.length}</Tag>
+      <div className="agent-chat-shell">
+        <Card className="agent-session-list queue-section" bordered>
+          <Button className="agent-new-chat" icon={<IconPlusCircle />}>
+            开启新对话
+          </Button>
+
+          <div className="agent-session-groups">
+            {groupedSessions.length ? (
+              groupedSessions.map((group) => (
+                <section className="agent-session-group" key={group.label}>
+                  <Text type="secondary">{group.label}</Text>
+                  {group.items.map((session, index) => (
+                    <button
+                      className={index === 0 && group.label === groupedSessions[0]?.label ? 'agent-session active' : 'agent-session'}
+                      key={session.id}
+                      onClick={() => onSelectItem(session.title)}
+                    >
+                      {session.title}
+                    </button>
+                  ))}
+                </section>
+              ))
+            ) : (
+              <Text type="secondary">暂无对话</Text>
+            )}
           </div>
-          {aiSessions.map((session, index) => (
-            <button
-              className={index === 0 ? 'ai-session active' : 'ai-session'}
-              key={session.title}
-              onClick={() => onSelectItem(session.title)}
-            >
-              <Text>{session.title}</Text>
-              <Text type="secondary">{session.summary}</Text>
-              <time>{session.time}</time>
-            </button>
-          ))}
         </Card>
 
-        <Card className="ai-chat-panel queue-section" bordered>
-          <div className="section-header">
-            <Title heading={6}>{selected?.title ?? '暂无会话'}</Title>
-            <Tag color="green">队列空闲</Tag>
+        <Card className="agent-chat-panel queue-section" bordered>
+          <div className="agent-chat-main">
+            <Title heading={2}>选择专家，开始对话</Title>
           </div>
-          <div className="chat-thread">
-            {messages.map((message, index) => (
-              <div className={`chat-message ${message.role}`} key={`${message.role}-${index}`}>
-                <Avatar size={30}>{message.role === 'assistant' ? <IconRobot /> : '张'}</Avatar>
-                <Paragraph>{message.text}</Paragraph>
-              </div>
-            ))}
-          </div>
-          <div className="chat-input">
-            <Input.TextArea placeholder="输入你的问题，结合项目上下文继续追问" autoSize={{ minRows: 3, maxRows: 4 }} />
-            <Space>
-              <Button>引用资料</Button>
-              <Button type="primary" icon={<IconSend />}>发送</Button>
-            </Space>
+          <div className="agent-composer">
+            <Input.TextArea placeholder="给 DeepSeek 发送消息" autoSize={{ minRows: 3, maxRows: 6 }} />
+            <div className="agent-composer-footer">
+              <Button className="agent-model-chip" icon={<IconRobot />}>
+                DeepSeek V4.0 Flash
+              </Button>
+              <Space>
+                <Button type="text" icon={<IconAttachment />} />
+                <Button className="agent-send-button" type="primary" shape="circle" icon={<IconArrowUp />} />
+              </Space>
+            </div>
           </div>
         </Card>
       </div>
     </div>
   )
 }
+
+function groupSessions(sessions: AISession[]) {
+  const labels = ['今天', '昨天', '7 天内']
+  return labels.map((label) => ({
+    label,
+    items: sessions.filter((session, index) => session.time.includes(label) || (!labels.some((item) => session.time.includes(item)) && labels.indexOf(label) === fallbackGroupIndex(index))),
+  })).filter((group) => group.items.length > 0)
+}
+
+function fallbackGroupIndex(index: number) {
+  if (index === 0) return 0
+  if (index === 1) return 1
+  return 2
+}

apps/web_v1/src/pages/projects/project-new-channel.tsx

@@ -54,7 +54,7 @@ export function ProjectNewChannel({ activeWorkspace }: { activeWorkspace: Projec
           <Tag color="arcoblue">外部资料库</Tag>
           <Tag color="green">项目流程页</Tag>
           <Tag color="orange">RSS/探索结果</Tag>
-          <Tag color="purple">AI 会话上下文</Tag>
+          <Tag color="purple">AI智能体上下文</Tag>
         </Space>
       </Card>
     </div>

apps/web_v1/src/pages/workspace-body.tsx

@@ -80,7 +80,7 @@ export function WorkspacePage({
   const workspaceMetrics = [
     { title: '项目总数', value: projects.length, delta: `${urgentProjects} 个高优先级`, icon: <IconDashboard />, color: 'arcoblue' },
     { title: '未完成计划', value: unfinishedTasks.length, delta: '跨项目聚合', icon: <IconCheckCircleFill />, color: 'green' },
-    { title: 'AI 会话', value: aiSessions.length, delta: '项目内上下文', icon: <IconRobot />, color: 'purple' },
+    { title: 'AI智能体', value: aiSessions.length, delta: '项目内上下文', icon: <IconRobot />, color: 'purple' },
     { title: '知识资料', value: notes.length, delta: '笔记与资料合计', icon: <IconFile />, color: 'cyan' },
   ]
 
@@ -89,7 +89,7 @@ export function WorkspacePage({
       <div className="overview-head">
         <div>
           <Title heading={4}>工作台</Title>
-          <Text type="secondary">所有项目的统一工作台，汇总项目任务、AI 会话和知识资产。</Text>
+          <Text type="secondary">所有项目的统一工作台，汇总项目任务、AI智能体和知识资产。</Text>
         </div>
       </div>