69 lines
2.9 KiB
TypeScript
69 lines
2.9 KiB
TypeScript
|
import { Avatar, Button, Card, Input, Space, Tag, Typography } from '@arco-design/web-react'
|
|||
|
|
import { IconPlus, IconRobot, IconSend } from '@arco-design/web-react/icon'
|
|||
|
|
import { aiSessions } from './project-data'
|
|||
|
|
import type { Project } from './project-types'
|
|||
|
|
|
|||
|
|
const { Title, Text, Paragraph } = Typography
|
|||
|
|
|
|||
|
|
const messages = [
|
|||
|
|
{ role: 'user', text: '请基于当前项目资料，整理本周风险和推进建议。' },
|
|||
|
|
{ role: 'assistant', text: '我建议优先处理导出问题、权限边界和 Q3 策略评审，并把客户反馈同步到工作计划。' },
|
|||
|
|
{ role: 'user', text: '把建议拆成可执行任务。' },
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
export function ProjectAi({ activeProject, onSelectItem }: { activeProject: Project; onSelectItem: (title: string) => void }) {
|
|||
|
|
return (
|
|||
|
|
<div className="project-channel-page project-ai-page overview-page">
|
|||
|
|
<div className="overview-head">
|
|||
|
|
<div>
|
|||
|
|
<Title heading={4}>AI 会话</Title>
|
|||
|
|
<Text type="secondary">{activeProject.name} 的项目内 AI session，左侧会话列表，右侧对话详情。</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>
|
|||
|
|
{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}>{aiSessions[0].title}</Title>
|
|||
|
|
<Tag color="green">队列空闲</Tag>
|
|||
|
|
</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>
|
|||
|
|
</Card>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|