114 lines
3.5 KiB
TypeScript
114 lines
3.5 KiB
TypeScript
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>
|
||
)
|
||
}
|