feat/playground: 重构 playground组件

- 更新 Data 和 History组件的样式和布局
- 添加新的功能和交互，如热门搜索和智能体选择
- 优化组件性能和可维护性

src/components/Option/Playground/PlaygroundEmpty.tsx

@@ -1,73 +1,14 @@
 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"
-
+import { qaPrompt } from "@/libs/playground.tsx"
 
 export const PlaygroundEmpty = () => {
-  const {
-    onSubmit,
-    setMessages,
-    setHistory,
-    setHistoryId,
-    historyId,
-    clearChat,
-    setSelectedModel,
-    temporaryChat,
-    setSelectedSystemPrompt
-  } = useMessageOption()
+  const { onSubmit } = 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: () => {
@@ -77,32 +18,36 @@ export const PlaygroundEmpty = () => {
     }
   })
 
-
   function handleQuestion(message: string) {
-    void sendMessage({message, image: ''})
+    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>
+        <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) => (
+        {qaPrompt.map((item, index) => (
           <Col key={index} xs={24} sm={12} md={8}>
             <Card
               hoverable
-              style={{backgroundColor: "#f3f4f6"}}
+              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)}
-            >
+              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 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>