chore: playground layout

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

@@ -0,0 +1,69 @@
+import { MinusCircleOutlined } from '@ant-design/icons';
+import { Button, Input } from 'antd';
+import { useEffect, useRef, useState } from 'react';
+import { Roles } from '../config';
+import '../style/message-item.less';
+
+const MessageContent: React.FC<{
+  message: string;
+  role: string;
+  isFocus: boolean;
+  onDelete: () => void;
+}> = ({ message, role, isFocus, onDelete }) => {
+  const [roleType, setRoleType] = useState(role);
+  const [messageContent, setMessageContent] = useState(message);
+  const inputRef = useRef<any>(null);
+
+  useEffect(() => {
+    if (inputRef.current && isFocus) {
+      inputRef.current.focus();
+    }
+  }, [isFocus]);
+
+  const handleMessageChange = (e: any) => {
+    setMessageContent(e.target.value);
+  };
+
+  const handleRoleChange = () => {
+    if (roleType === Roles.User) {
+      setRoleType(Roles.Assistant);
+    }
+    if (roleType === Roles.Assistant) {
+      setRoleType(Roles.User);
+    }
+  };
+
+  const handleDelete = () => {
+    onDelete();
+  };
+  return (
+    <div className="message-item">
+      <div className="role-type">
+        <Button onClick={handleRoleChange} type="text">
+          {roleType}
+        </Button>
+      </div>
+      <div className="message-content-input">
+        <Input.TextArea
+          ref={inputRef}
+          style={{ paddingBlock: '12px' }}
+          value={messageContent}
+          autoSize={true}
+          variant="filled"
+          onChange={handleMessageChange}
+        ></Input.TextArea>
+      </div>
+      <div className="delete-btn">
+        <Button
+          type="text"
+          shape="circle"
+          style={{ color: 'var(--ant-color-primary' }}
+          onClick={handleDelete}
+          icon={<MinusCircleOutlined />}
+        ></Button>
+      </div>
+    </div>
+  );
+};
+
+export default MessageContent;