fix(style): imgs overflow style on chat

src/components/audio-player/simple-audio.tsx

@@ -50,7 +50,7 @@ const useStyles = createStyles(({ css, token }) => {
   return {
     wrapper: css`
       position: relative;
-      min-width: 300px;
+      min-width: 360px;
       height: 54px;
       display: flex;
       align-items: center;

src/pages/dashboard/components/over-view.tsx

@@ -52,7 +52,7 @@ const Overview: React.FC = () => {
   };
   return (
     <div>
-      <Row gutter={[24, 20]} className={styles.row}>
+      <Row gutter={[20, 20]} className={styles.row}>
         {overviewConfigs.map((config, index) => (
           <Col
             xs={{ flex: '100%' }}

src/pages/llmodels/components/deploy-modal.tsx

@@ -187,11 +187,13 @@ const AddModal: FC<AddModalProps> = (props) => {
   };
 
   const getDefaultSpec = (item: any) => {
-    const defaultSpec = item.evaluateResult?.default_spec || {};
+    const defaultSpec = _.get(item.evaluateResult?.default_spec, [
-    return _.omit(defaultSpec, [
+      'backend_version',
-      'cpu_offloading',
+      'backend_parameters',
-      'distributed_inference_across_workers'
+      'env'
     ]);
+
+    return defaultSpec;
   };
 
   const getCategory = (item: any) => {

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

@@ -36,11 +36,22 @@ const audioTypeMap: Record<string, string> = {
 
 const AudioWrapper = styled.div`
   padding-block: 10px;
+  height: max-content;
+  width: max-content;
   audio {
     padding-top: 10px;
   }
 `;
 
+const ImgsWrapper = styled.div.attrs({
+  className: 'custom-scrollbar-horizontal'
+})`
+  display: flex;
+  overflow-x: auto;
+  width: 100%;
+  flex-direction: column;
+`;
+
 type CurrentMessage = Omit<MessageItem, 'uid'>;
 
 type ActionType =
@@ -505,8 +516,9 @@ const MessageInput: React.FC<MessageInputProps> = forwardRef(
             )}
           </div>
         </div>
-        <div className="flex">
+        <ImgsWrapper>
           <ThumbImg
+            style={{ paddingBlockEnd: 0 }}
             dataList={message.imgs || []}
             onDelete={handleDeleteImg}
             editable={true}
@@ -521,7 +533,7 @@ const MessageInput: React.FC<MessageInputProps> = forwardRef(
               ></SimpleAudio>
             </AudioWrapper>
           )}
-        </div>
+        </ImgsWrapper>
         <div className="input-box">
           {actions.includes('paste') ? (
             <TextArea

src/pages/playground/components/multiple-chat/message-body.tsx

@@ -18,7 +18,17 @@ import ThinkContent from './think-content';
 const AudioWrapper = styled.div`
   padding-top: 10px;
   height: max-content;
-  margin-right: 10px;
+  width: max-content;
+  margin-inline: 10px;
+`;
+
+const ThumbImgWrapper = styled.div.attrs({
+  className: 'custom-scrollbar-horizontal'
+})`
+  display: flex;
+  justify-content: flex-start;
+  overflow-x: auto;
+  flex-direction: column;
 `;
 
 interface MessageBodyProps {
@@ -239,8 +249,9 @@ const MessageBody: React.FC<MessageBodyProps> = forwardRef(
           })}
           onClick={handleClickWrapper}
         >
-          <div className="justify-start ">
+          <ThumbImgWrapper>
             <ThumbImg
+              style={{ paddingBlockEnd: 0 }}
               editable={editable}
               dataList={data.imgs || []}
               onDelete={handleDeleteImg}
@@ -255,7 +266,7 @@ const MessageBody: React.FC<MessageBodyProps> = forwardRef(
                 ></SimpleAudio>
               </AudioWrapper>
             )}
-          </div>
+          </ThumbImgWrapper>
           <>
             {data.role === Roles.User ? (
               <Input.TextArea