59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
import { Card, Col, Row } from "antd"
|
||
|
||
import { useMessageOption } from "@/hooks/useMessageOption.tsx"
|
||
import { useMutation, useQueryClient } from "@tanstack/react-query"
|
||
import { qaPrompt } from "@/libs/playground.tsx"
|
||
|
||
export const PlaygroundEmpty = () => {
|
||
const { onSubmit } = useMessageOption()
|
||
|
||
const queryClient = useQueryClient()
|
||
|
||
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">
|
||
{qaPrompt.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 w-10">{item.icon}</div>
|
||
<div className="font-medium text-sm text-gray-800">
|
||
{item.title}
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</Col>
|
||
))}
|
||
</Row>
|
||
</div>
|
||
)
|
||
}
|