page-assist/src/components/Option/Playground/PlaygroundEmpty.tsx

import { Card, Col, Row } from "antd"

import RocketSvg from '@/assets/icons/rocket.svg'
import BulbSvg from '@/assets/icons/bulb.svg'
import EyeSvg from '@/assets/icons/eye.svg'
import ASvg from '@/assets/icons/a.svg'
import BSvg from '@/assets/icons/b.svg'
import CSvg from '@/assets/icons/c.svg'
import DSvg from '@/assets/icons/d.svg'
import ESvg from '@/assets/icons/e.svg'
import FSvg from '@/assets/icons/f.svg'
import { useMessageOption } from "@/hooks/useMessageOption.tsx"
import { useMutation, useQueryClient } from "@tanstack/react-query"


export const PlaygroundEmpty = () => {
  const {
    onSubmit,
    setMessages,
    setHistory,
    setHistoryId,
    historyId,
    clearChat,
    setSelectedModel,
    temporaryChat,
    setSelectedSystemPrompt
  } = useMessageOption()

  const queryClient = useQueryClient()


  const questions = [
    {
      title: "最近一年大型语言模型的技术进展有哪些？",
      icon: <img src={RocketSvg} alt="Rocket" className="w-10 my-0" />,
    },
    {
      title: "生成式AI在企业中有哪些具体应用场景？",
      icon: <img src={BulbSvg} alt="Rocket" className="w-10 my-0" />,
    },
    {
      title: "多模态学习技术的最新研究方向是什么？",
      icon: <img src={EyeSvg} alt="Rocket" className="w-10 my-0" />,
    },
    {
      title: "当前AI芯片市场格局和未来三年发展趋势如何？",
      icon: <img src={ASvg} alt="Rocket" className="w-10 my-0" />,
    },
    {
      title: "主流深度学习框架性能与易用性对比分析？",
      icon: <img src={BSvg} alt="Rocket" className="w-10 my-0" />,
    },
    {
      title: "国内外AI伦理治理框架有哪些最佳实践？",
      icon: <img src={CSvg} alt="Rocket" className="w-10 my-0" />,
    },
    {
      title: "大规模知识图谱构建与应用最新进展？",
      icon: <img src={DSvg} alt="Rocket" className="w-10 my-0" />,
    },
    {
      title: "计算机视觉领域近期突破性技术有哪些？",
      icon: <img src={ESvg} alt="Rocket" className="w-10 my-0" />,
    },
    {
      title: "量子计算对AI算法的影响与应用前景？",
      icon: <img src={FSvg} alt="Rocket" className="w-10 my-0" />,
    },
  ]

  const { mutateAsync: sendMessage } = useMutation({
    mutationFn: onSubmit,
    onSuccess: () => {
      queryClient.invalidateQueries({
        queryKey: ["fetchChatHistory"]
      })
    }
  })


  function handleQuestion(message: string) {
    void sendMessage({message, image: ''})
  }

  return (
    <div className="w-full p-4">
      {/* 标题区域 */}
      <div className="mb-4">
        <h2 className="text-xl font-bold text-gray-800" style={{lineHeight: '0'}}>数联网科创智能体</h2>
        <p className="text-sm text-gray-500">您好！请问有什么可以帮您？</p>
      </div>

      {/* 卡片网格布局 */}
      <Row gutter={[16, 16]} className="w-full">
        {questions.map((item, index) => (
          <Col key={index} xs={24} sm={12} md={8}>
            <Card
              hoverable
              style={{backgroundColor: "#f3f4f6"}}
              className="border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200 cursor-pointer"
              onClick={() => handleQuestion(item.title)}
            >
              <div className="flex items-center">
                <div className="text-blue-500 mr-2">{item.icon}</div>
                <div className="font-medium text-sm text-gray-800">{item.title}</div>
              </div>
            </Card>
          </Col>
        ))}
      </Row>
    </div>
  )
}