chore: resource list

src/pages/playground/components/ground-left.tsx

@@ -1,7 +1,10 @@
-import SealInput from '@/components/seal-form/seal-input';
+import TransitionWrapper from '@/components/transition';
+import { EyeInvisibleOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
+import { Button, Input } from 'antd';
 import { useState } from 'react';
 import '../style/ground-left.less';
+import '../style/system-message-wrap.less';
 import ChatFooter from './chat-footer';
 import MessageItem from './message-item';
 import ReferenceParams from './reference-params';
@@ -18,9 +21,14 @@ const MessageList: React.FC = () => {
       message: 'hello, nice to meet you!'
     }
   ]);
+  const [systemMessage, setSystemMessage] = useState('');
   const [show, setShow] = useState(false);
   const [activeIndex, setActiveIndex] = useState(-1);
 
+  const handleSystemMessageChange = (e: any) => {
+    console.log('system message:', e.target.value);
+    setSystemMessage(e.target.value);
+  };
   const handleNewMessage = () => {
     console.log('new message');
     messageList.push({
@@ -52,12 +60,30 @@ const MessageList: React.FC = () => {
     setMessageList([...messageList]);
   };
 
+  const renderLabel = () => {
+    return (
+      <div className="system-message-wrap ">
+        <span className="title">System</span>
+        <Button type="primary" size="small">
+          <EyeInvisibleOutlined />
+        </Button>
+      </div>
+    );
+  };
   return (
     <div className="ground-left">
       <PageContainer title={false} className="message-list-wrap">
-        <div style={{ marginBottom: '40px' }}>
-          <SealInput.TextArea label="Message"></SealInput.TextArea>
+        <div style={{ marginBottom: 40 }}>
+          <TransitionWrapper header={renderLabel()} variant="filled">
+            <Input.TextArea
+              value={systemMessage}
+              style={{ minHeight: '0px' }}
+              variant="filled"
+              onChange={handleSystemMessageChange}
+            ></Input.TextArea>
+          </TransitionWrapper>
         </div>
+
         <div>
           {messageList.map((item, index) => {
             return (

src/pages/playground/components/message-item.tsx

@@ -57,7 +57,7 @@ const MessageContent: React.FC<{
         <Button
           type="text"
           shape="circle"
-          style={{ color: 'var(--ant-color-primary' }}
+          style={{ color: 'var(--ant-color-primary)' }}
           onClick={handleDelete}
           icon={<MinusCircleOutlined />}
         ></Button>

src/pages/playground/style/message-item.less

@@ -1,16 +1,36 @@
 .message-item {
+  position: relative;
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
   margin-bottom: 12px;
+  &:hover {
+    .delete-btn {
+      opacity: 1;
+      transition: all 0.3s var(--seal-transition-func);
+    }
+  }
   .role-type {
     margin-right: 12px;
+    background-color: var(--ant-button-text-hover-bg);
     .ant-btn {
       text-align: left;
       width: 100px;
+      background-color: var(--ant-button-text-hover-bg);
+      height: 46px;
     }
   }
   .message-content-input {
     flex: 1;
+    .ant-input {
+      padding-right: 30px;
+    }
+  }
+  .delete-btn {
+    opacity: 0;
+    position: absolute;
+    top: 2px;
+    right: 0;
+    transition: all 0.3s var(--seal-transition-func);
   }
 }

src/pages/playground/style/system-message-wrap.less

@@ -0,0 +1,5 @@
+.system-message-wrap {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}