feat: user settings

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

@@ -4,6 +4,7 @@ import '../style/ground-left.less';
 import ChatFooter from './chat-footer';
 import MessageItem from './message-item';
 import ReferenceParams from './reference-params';
+import ViewCodeModal from './view-code-modal';
 
 const MessageList: React.FC = () => {
   const [messageList, setMessageList] = useState<any[]>([
@@ -16,6 +17,7 @@ const MessageList: React.FC = () => {
       message: 'hello, nice to meet you!'
     }
   ]);
+  const [show, setShow] = useState(false);
   const [activeIndex, setActiveIndex] = useState(-1);
 
   const handleNewMessage = () => {
@@ -33,13 +35,17 @@ const MessageList: React.FC = () => {
   };
 
   const handleView = () => {
-    console.log('view');
+    setShow(true);
   };
 
   const handleSubmit = () => {
     console.log('submit');
   };
 
+  const handleCloseViewCode = () => {
+    setShow(false);
+  };
+
   const handleDelete = (index: number) => {
     messageList.splice(index, 1);
     setMessageList([...messageList]);
@@ -71,6 +77,11 @@ const MessageList: React.FC = () => {
           feedback={<ReferenceParams></ReferenceParams>}
         ></ChatFooter>
       </div>
+      <ViewCodeModal
+        open={show}
+        onCancel={handleCloseViewCode}
+        title="View code"
+      ></ViewCodeModal>
     </div>
   );
 };

src/pages/playground/components/params-settings.tsx

@@ -68,10 +68,9 @@ const ParamsSettings: React.FC<{ onClose: () => void }> = ({ onClose }) => {
           name="temperature"
           rules={[{ required: true }]}
         >
-          <SealInput.Input
-            label="Temperature"
-            style={{ width: INPUT_WIDTH.mini }}
-          ></SealInput.Input>
+          <FieldWrapper label="Temperature">
+            <Slider defaultValue={50}></Slider>
+          </FieldWrapper>
         </Form.Item>
         <Form.Item<ParamsSettingsProps>
           name="maxTokens"
@@ -86,7 +85,7 @@ const ParamsSettings: React.FC<{ onClose: () => void }> = ({ onClose }) => {
           name="topP"
           rules={[{ required: true }]}
         >
-          <FieldWrapper label="TopP">
+          <FieldWrapper label="Top P">
             <Slider defaultValue={50}></Slider>
           </FieldWrapper>
         </Form.Item>

src/pages/playground/components/view-code-modal.tsx

@@ -0,0 +1,84 @@
+import EditorWrap from '@/components/editor-wrap';
+import Editor from '@monaco-editor/react';
+import { Modal } from 'antd';
+import React, { useRef, useState } from 'react';
+
+type ViewModalProps = {
+  title: string;
+  open: boolean;
+  onCancel: () => void;
+};
+
+const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
+  const { title, open, onCancel } = props || {};
+  if (!open) {
+    return null;
+  }
+  const editorRef = useRef(null);
+  const [codeValue, setCodeValue] = useState('');
+  const [lang, setLang] = useState('json');
+
+  const langOptions = [
+    { label: 'curl', value: 'curl' },
+    { label: 'JSON', value: 'json' },
+    { label: 'JavaScript', value: 'javascript' },
+    { label: 'Python', value: 'python' }
+  ];
+
+  const handleEditorDidMount = (editor: any, monaco: any) => {
+    editorRef.current = editor;
+  };
+
+  const handleOnChangeLang = (value: string) => {
+    setLang(value);
+  };
+  const editorConfig = {
+    minimap: {
+      enabled: false
+    },
+    scrollbar: {
+      verticalSliderSize: 8
+    }
+  };
+  return (
+    <Modal
+      title={title}
+      open={open}
+      onCancel={onCancel}
+      destroyOnClose={true}
+      closeIcon={true}
+      maskClosable={false}
+      keyboard={false}
+      width={600}
+      style={{ top: '80px' }}
+      footer={null}
+    >
+      <div style={{ marginBottom: '10px' }}>
+        You can use the following code to start integrating your current prompt
+        and settings into your application.
+      </div>
+      <EditorWrap
+        copyText={codeValue}
+        langOptions={langOptions}
+        onChangeLang={handleOnChangeLang}
+      >
+        <Editor
+          height="400px"
+          theme="vs-dark"
+          className="monaco-editor"
+          defaultLanguage="javascript"
+          defaultValue="// some comment"
+          language={lang}
+          options={editorConfig}
+          onMount={handleEditorDidMount}
+        />
+      </EditorWrap>
+      <div style={{ marginTop: '10px' }}>
+        our API Key can be foundhere You should use environment variables or a
+        secret management tool to expose your key to your applications.
+      </div>
+    </Modal>
+  );
+};
+
+export default ViewCodeModal;

src/pages/profile/index.tsx

@@ -0,0 +1,79 @@
+import FormButtons from '@/components/form-buttons';
+import SealInput from '@/components/seal-form/seal-input';
+import { INPUT_WIDTH } from '@/constants';
+import { PageContainer } from '@ant-design/pro-components';
+import { Form } from 'antd';
+import { StrictMode } from 'react';
+
+interface ProfileProps {
+  name: string;
+  password: string;
+  originalPassword: string;
+  email: string;
+}
+const Profile: React.FC = () => {
+  const [form] = Form.useForm();
+
+  const handleOnFinish = (values: any) => {
+    console.log('handleOnFinish', values);
+  };
+
+  const handleOnFinishFailed = (errorInfo: any) => {
+    console.log('handleOnFinishFailed', errorInfo);
+  };
+
+  return (
+    <StrictMode>
+      <PageContainer
+        ghost
+        header={{
+          title: 'Profile'
+        }}
+        extra={[]}
+      >
+        <Form
+          style={{ width: '524px' }}
+          name="profileForm"
+          form={form}
+          onFinish={handleOnFinish}
+          onFinishFailed={handleOnFinishFailed}
+        >
+          <Form.Item<ProfileProps> name="name" rules={[{ required: true }]}>
+            <SealInput.Input
+              label="Name"
+              required
+              style={{ width: INPUT_WIDTH.default }}
+            ></SealInput.Input>
+          </Form.Item>
+          <Form.Item<ProfileProps> name="email" rules={[{ required: true }]}>
+            <SealInput.Input
+              label="Email"
+              required
+              style={{ width: INPUT_WIDTH.default }}
+            ></SealInput.Input>
+          </Form.Item>
+          <Form.Item<ProfileProps>
+            name="originalPassword"
+            rules={[{ required: true }]}
+          >
+            <SealInput.Password
+              label="Original Password"
+              required
+              style={{ width: INPUT_WIDTH.default }}
+            ></SealInput.Password>
+          </Form.Item>
+          <Form.Item<ProfileProps> name="password" rules={[{ required: true }]}>
+            <SealInput.Password
+              label="Password"
+              required
+              style={{ width: INPUT_WIDTH.default }}
+            ></SealInput.Password>
+          </Form.Item>
+        </Form>
+        <FormButtons></FormButtons>
+      </PageContainer>
+    </StrictMode>
+  );
+};
+
+export default Profile;