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

import { useEffect, useRef, useState } from 'react'
import { Alert, Button, Card, Empty, Input, Space, Spin, Tag, Typography } from '@arco-design/web-react'
import { IconPlusCircle, IconRobot } from '@arco-design/web-react/icon'
import type { AISessionDTO, CreateAISessionInput } from '../../api/ai'
import type { ProjectWorkspace } from './project-types'

const { Title, Text } = Typography

export function ProjectAi({
  activeWorkspace,
  onSelectItem,
  onListSessions,
  onCreateSession,
}: {
  activeWorkspace: ProjectWorkspace
  onSelectItem: (title: string) => void
  onListSessions: (projectId: string, signal?: AbortSignal) => Promise<AISessionDTO[]>
  onCreateSession: (projectId: string, input: CreateAISessionInput, signal?: AbortSignal) => Promise<AISessionDTO>
}) {
  const [sessions, setSessions] = useState<AISessionDTO[]>([])
  const [title, setTitle] = useState('')
  const [context, setContext] = useState('')
  const [loading, setLoading] = useState(true)
  const [creating, setCreating] = useState(false)
  const [error, setError] = useState('')
  const projectId = activeWorkspace.project.id
  const projectRef = useRef(projectId)
  const generationRef = useRef(0)
  const listControllerRef = useRef<AbortController | null>(null)
  const createControllerRef = useRef<AbortController | null>(null)
  projectRef.current = projectId

  useEffect(() => {
    const generation = ++generationRef.current
    const controller = new AbortController()
    listControllerRef.current?.abort()
    createControllerRef.current?.abort()
    listControllerRef.current = controller
    createControllerRef.current = null
    setSessions([])
    setTitle('')
    setContext('')
    setLoading(true)
    setCreating(false)
    setError('')
    const isCurrent = () => projectRef.current === projectId && generationRef.current === generation && !controller.signal.aborted

    void onListSessions(projectId, controller.signal)
      .then((items) => {
        if (isCurrent()) setSessions(items)
      })
      .catch((requestError: unknown) => {
        if (isCurrent()) setError(requestError instanceof Error ? requestError.message : 'AI 会话加载失败，请稍后重试')
      })
      .finally(() => {
        if (isCurrent()) {
          setLoading(false)
          listControllerRef.current = null
        }
      })

    return () => {
      generationRef.current += 1
      controller.abort()
      if (listControllerRef.current === controller) listControllerRef.current = null
      createControllerRef.current?.abort()
      createControllerRef.current = null
    }
  }, [onListSessions, projectId])

  const createSession = async () => {
    const trimmedTitle = title.trim()
    if (!trimmedTitle) {
      setError('请输入 AI 会话标题')
      return
    }
    const generation = ++generationRef.current
    listControllerRef.current?.abort()
    listControllerRef.current = null
    createControllerRef.current?.abort()
    const controller = new AbortController()
    createControllerRef.current = controller
    const isCurrent = () => projectRef.current === projectId && generationRef.current === generation && !controller.signal.aborted

    setLoading(false)
    setCreating(true)
    setError('')
    try {
      const created = await onCreateSession(projectId, {
        title: trimmedTitle,
        context: context.trim(),
      }, controller.signal)
      if (!isCurrent()) return
      setSessions((current) => [created, ...current.filter((session) => session.id !== created.id)])
      setTitle('')
      setContext('')
      onSelectItem(created.title)
    } catch (requestError) {
      if (!isCurrent()) return
      setError(requestError instanceof Error ? requestError.message : 'AI 会话创建失败，请稍后重试')
    } finally {
      if (isCurrent()) {
        setCreating(false)
        createControllerRef.current = null
      }
    }
  }

  return (
    <div className="project-channel-page project-ai-page overview-page">
      <div className="overview-head">
        <div>
          <Title heading={4}>AI 对话</Title>
          <Text type="secondary">创建项目内普通会话；不会自动生成任务、笔记或资料。</Text>
        </div>
      </div>

      {error ? <Alert className="agent-request-error" type="error" content={error} closable onClose={() => setError('')} /> : null}

      <div className="agent-chat-shell">
        <Card className="agent-session-list queue-section" bordered title="会话列表">
          <Spin loading={loading} style={{ width: '100%' }}>
            {sessions.length ? (
              <div className="agent-session-groups">
                {sessions.map((session) => (
                  <button className="agent-session" key={session.id} onClick={() => onSelectItem(session.title)}>
                    <span>{session.title}</span>
                    <Tag size="small" color={session.status === 'ready' ? 'arcoblue' : 'gray'}>
                      {sessionStatusLabel(session.status)}
                    </Tag>
                  </button>
                ))}
              </div>
            ) : loading ? null : <Empty description="暂无 AI 会话" />}
          </Spin>
        </Card>

        <Card className="agent-chat-panel queue-section" bordered>
          <Space direction="vertical" size={16} className="action-form">
            <div>
              <Title heading={5}>创建会话</Title>
              <Text type="secondary">会话状态为“待开始”只表示入口已建立，不代表 AI 已完成处理。</Text>
            </div>
            <label>
              <Text>会话标题</Text>
              <Input value={title} onChange={setTitle} placeholder="例如：报价分析" maxLength={120} />
            </label>
            <label>
              <Text>项目上下文</Text>
              <Input.TextArea
                value={context}
                onChange={setContext}
                placeholder="描述本次会话要参考的项目背景"
                autoSize={{ minRows: 5, maxRows: 10 }}
              />
            </label>
            <Button type="primary" icon={<IconPlusCircle />} loading={creating} onClick={() => void createSession()}>
              创建会话
            </Button>
            <Text type="secondary"><IconRobot /> AI 输出如需转为正式对象，必须另行确认。</Text>
          </Space>
        </Card>
      </div>
    </div>
  )
}

function sessionStatusLabel(status: string) {
  if (status === 'ready') return '待开始'
  if (status === 'failed') return '创建失败'
  return status || '未知状态'
}