style: worker vram value

src/pages/playground/components/chat-footer.tsx

@@ -59,20 +59,8 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
   return (
     <div className="chat-footer">
       <Row style={{ width: '100%' }}>
-        <Col span={hasTokenResult ? 8 : 12}>
+        <Col lg={hasTokenResult ? 8 : 12} xs={24} sm={24} md={12}>
           <Space size={20}>
-            {/* <Dropdown
-              menu={{ items: MessageRoles, onClick: onNewMessage }}
-              placement="topLeft"
-            >
-              <Button
-                disabled={disabled}
-                icon={<PlusOutlined />}
-                onClick={onNewMessage}
-              >
-                {intl.formatMessage({ id: 'playground.newMessage' })}
-              </Button>
-            </Dropdown> */}
             <Button
               disabled={disabled}
               icon={<PlusOutlined />}
@@ -120,18 +108,12 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
                 </span>
               </Button>
             ) : (
-              <Button type="primary" onClick={onStop}>
-                <div className="flex flex-center">
-                  <span>
-                    {intl.formatMessage({ id: 'common.button.stop' })}
-                  </span>
-                  <span className="m-l-5 flex flex-center">
-                    <IconFont
-                      type="icon-stop1"
-                      className="font-size-14"
-                    ></IconFont>
-                  </span>
-                </div>
+              <Button
+                type="primary"
+                onClick={onStop}
+                icon={<IconFont type="icon-stop1"></IconFont>}
+              >
+                <span>{intl.formatMessage({ id: 'common.button.stop' })}</span>
               </Button>
             )}
           </Space>

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

@@ -150,9 +150,20 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
         </h3>
         <Form.Item<ParamsSettingsFormProps>
           name="model"
-          rules={[{ required: false }]}
+          rules={[
+            {
+              required: true,
+              message: intl.formatMessage(
+                {
+                  id: 'common.form.rule.select'
+                },
+                { name: intl.formatMessage({ id: 'playground.model' }) }
+              )
+            }
+          ]}
         >
           <SealSelect
+            showSearch
             options={ModelList}
             label={intl.formatMessage({ id: 'playground.model' })}
           ></SealSelect>

src/pages/playground/style/play-ground.less

@@ -18,8 +18,9 @@
     transition: width 0.3s ease;
 
     &.collapse {
-      width: 0;
+      width: 33px;
       padding-left: 32px;
+      overflow: hidden;
       transition: width 0.3s ease;
     }
   }
@@ -43,7 +44,13 @@
   .params-box {
     padding-inline: 32px;
     height: 100%;
+    width: 390px;
     overflow-y: auto;
+    overflow-x: hidden;
+
+    &.collapse {
+      padding-inline: 0;
+    }
   }
 
   .divider-line {
@@ -51,7 +58,7 @@
 
     &.collapse {
       width: 0;
-      transition: width 0.3s;
+      transition: width 0.3s ease;
     }
 
     .ant-divider {