style: transition wrapper height

src/pages/Resources/components/gpus.tsx

@@ -191,44 +191,16 @@ const Models: React.FC = () => {
             );
           }}
         />
-        <Column title="IP / PID" dataIndex="address" key="address" />
+        <Column title="IP" dataIndex="address" key="address" />
+
+        <Column title="Temperature" dataIndex="Temperature" key="Temperature" />
+        <Column title="Core" dataIndex="core" key="Core" />
+        <Column title="GPU-Util" dataIndex="gpuUtil" key="gpuUtil" />
+
         <Column
-          title="CPU"
-          dataIndex="CPU"
-          key="CPU"
-          render={(text, record: NodeItem) => {
-            return (
-              <RenderProgress record={record} dataIndex="cpu"></RenderProgress>
-            );
-          }}
-        />
-        <Column
-          title="Memory"
-          dataIndex="memory"
-          key="Memory"
-          render={(text, record: NodeItem) => {
-            return (
-              <RenderProgress
-                record={record}
-                dataIndex="memory"
-              ></RenderProgress>
-            );
-          }}
-        />
-        <Column
-          title="GPU"
-          dataIndex="GPU"
-          key="GPU"
-          render={(text, record: NodeItem) => {
-            return (
-              <RenderProgress record={record} dataIndex="gpu"></RenderProgress>
-            );
-          }}
-        />
-        <Column
-          title="GRAM"
+          title="VRAM"
           dataIndex="GRAM"
-          key="GRAM"
+          key="VRAM"
           render={(text, record: NodeItem) => {
             return (
               <RenderProgress record={record} dataIndex="gram"></RenderProgress>

src/pages/Resources/components/nodes.tsx

@@ -191,7 +191,7 @@ const Models: React.FC = () => {
             );
           }}
         />
-        <Column title="IP / PID" dataIndex="address" key="address" />
+        <Column title="IP" dataIndex="address" key="address" />
         <Column
           title="CPU"
           dataIndex="CPU"
@@ -226,9 +226,9 @@ const Models: React.FC = () => {
           }}
         />
         <Column
-          title="GRAM"
+          title="VRAM"
           dataIndex="GRAM"
-          key="GRAM"
+          key="VRAM"
           render={(text, record: NodeItem) => {
             return (
               <RenderProgress record={record} dataIndex="gram"></RenderProgress>

src/pages/Resources/index.tsx

@@ -32,13 +32,15 @@ const Resources = () => {
       }}
       extra={[]}
     >
-      <Tabs
-        type="card"
-        defaultActiveKey="nodes"
-        items={items}
-        accessKey={activeKey}
-        onChange={handleChangeTab}
-      ></Tabs>
+      <div style={{ marginTop: 70 }}>
+        <Tabs
+          type="card"
+          defaultActiveKey="nodes"
+          items={items}
+          accessKey={activeKey}
+          onChange={handleChangeTab}
+        ></Tabs>
+      </div>
     </PageContainer>
   );
 };

src/pages/api-keys/components/add-apikey.tsx

@@ -1,6 +1,7 @@
 import CopyButton from '@/components/copy-button';
 import ModalFooter from '@/components/modal-footer';
 import SealInput from '@/components/seal-form/seal-input';
+import SealSelect from '@/components/seal-form/seal-select';
 import { PageActionType } from '@/config/types';
 import { SyncOutlined } from '@ant-design/icons';
 import { Form, Modal } from 'antd';
@@ -12,6 +13,12 @@ type AddModalProps = {
   onOk: () => void;
   onCancel: () => void;
 };
+
+const expirationOptions = [
+  { label: '1 Month', value: '1m' },
+  { label: '6 Months', value: '6m' },
+  { label: 'Never', value: 'never' }
+];
 const AddModal: React.FC<AddModalProps> = ({
   title,
   action,
@@ -55,6 +62,13 @@ const AddModal: React.FC<AddModalProps> = ({
             }
           ></SealInput.Input>
         </Form.Item>
+        <Form.Item name="expiration" rules={[{ required: true }]}>
+          <SealSelect
+            label="Expiration"
+            required
+            options={expirationOptions}
+          ></SealSelect>
+        </Form.Item>
       </Form>
     </Modal>
   );

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

@@ -2,7 +2,7 @@ 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 { useRef, useState } from 'react';
 import '../style/ground-left.less';
 import '../style/system-message-wrap.less';
 import ChatFooter from './chat-footer';
@@ -24,9 +24,9 @@ const MessageList: React.FC = () => {
   const [systemMessage, setSystemMessage] = useState('');
   const [show, setShow] = useState(false);
   const [activeIndex, setActiveIndex] = useState(-1);
+  const systemRef = useRef<any>(null);
 
   const handleSystemMessageChange = (e: any) => {
-    console.log('system message:', e.target.value);
     setSystemMessage(e.target.value);
   };
   const handleNewMessage = () => {
@@ -74,11 +74,16 @@ const MessageList: React.FC = () => {
     <div className="ground-left">
       <PageContainer title={false} className="message-list-wrap">
         <div style={{ marginBottom: 40 }}>
-          <TransitionWrapper header={renderLabel()} variant="filled">
+          <TransitionWrapper
+            header={renderLabel()}
+            variant="filled"
+            ref={systemRef}
+          >
             <Input.TextArea
               value={systemMessage}
-              style={{ minHeight: '0px' }}
               variant="filled"
+              autoSize={true}
+              placeholder="Enter system message here..."
               onChange={handleSystemMessageChange}
             ></Input.TextArea>
           </TransitionWrapper>

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

@@ -2,4 +2,5 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  height: 100%;
 }