chore: playground layout

src/pages/playground/index.tsx

@@ -1,19 +1,10 @@
-import { ControlOutlined } from '@ant-design/icons';
-import { PageContainer } from '@ant-design/pro-components';
-import { Button, Popover, Select, Space } from 'antd';
+import { Divider } from 'antd';
 import { useEffect, useState } from 'react';
-import ChatContent from './components/chatContent';
-import MessageInput from './components/messageInput';
+import GroundLeft from './components/ground-left';
 import ParamsSettings from './components/params-settings';
-
-const dataList = [
-  { value: 'llama3:latest', label: 'llama3:latest' },
-  { value: 'wangfuyun/AnimateLCM', label: 'wangfuyun/AnimateLCM' },
-  { value: 'Revanthraja/Text_to_Vision', label: 'Revanthraja/Text_to_Vision' }
-];
+import './style/play-ground.less';
 
 const Playground: React.FC = () => {
-  const [ModelList, setModelList] = useState(dataList);
   const [messageList, setMessageList] = useState<any[]>([]);
   const [selectedModel, setSelectedModel] = useState('llama3:latest');
   const [showPopover, setShowPopover] = useState(false);
@@ -41,49 +32,17 @@ const Playground: React.FC = () => {
   }, [selectedModel]);
 
   return (
-    <PageContainer
-      title={false}
-      extra={[
-        <Space size={20} key="space">
-          <Select
-            showSearch
-            options={ModelList}
-            style={{ width: 300 }}
-            value={selectedModel}
-            onChange={handleSelectChange}
-            variant="filled"
-            key="model-select"
-          ></Select>
-          <Popover
-            content={
-              <ParamsSettings onClose={handleClosePopover}></ParamsSettings>
-            }
-            destroyTooltipOnHide={true}
-            title="Params Settings"
-            trigger="click"
-            arrow={false}
-            open={showPopover}
-            overlayStyle={{ top: 70 }}
-            overlayInnerStyle={{ paddingRight: 0 }}
-            placement="bottomRight"
-            key="popover"
-          >
-            <Button
-              onClick={handleTogglePopover}
-              type="primary"
-              shape="circle"
-              key="button"
-              icon={<ControlOutlined />}
-            ></Button>
-          </Popover>
-        </Space>
-      ]}
-      footer={[<MessageInput key="message" />]}
-    >
-      <div style={{ display: 'flex', justifyContent: 'center' }}>
-        <ChatContent messageList={messageList}></ChatContent>
+    <div className="play-ground">
+      <div className="chat">
+        <GroundLeft></GroundLeft>
       </div>
-    </PageContainer>
+      <div className="divider-line">
+        <Divider type="vertical" />
+      </div>
+      <div className="params">
+        <ParamsSettings onClose={handleClosePopover} />
+      </div>
+    </div>
   );
 };