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: "如何开发一个零碳园区的数字化评价系统？",
      icon: <img src={BulbSvg} alt="Rocket" className="w-10 my-0" />,
    },
    {
      title: "如何开发一个碳定价预测系统？",
      icon: <img src={EyeSvg} alt="Rocket" className="w-10 my-0" />,
    },
    {
      title: "新药临床研究如何提升实验安全性？",
      icon: <img src={ASvg} alt="Rocket" className="w-10 my-0" />,
    },
    {
      title: "如何加速新药申报和审批？",
      icon: <img src={BSvg} alt="Rocket" className="w-10 my-0" />,
    },
    {
      title: "如何研制与司美格鲁肽相似的新药？",
      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: "如何解决船舶制造中流体模拟和建模优化难题？",
      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>
  )
}