From 58615081531ef21a2f493239fb4915c4c47aabc0 Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Fri, 27 Jun 2025 13:41:42 +0800
Subject: [PATCH] fix(style): imgs overflow style on chat

---
 src/components/audio-player/simple-audio.tsx    |  2 +-
 src/pages/dashboard/components/over-view.tsx    |  2 +-
 src/pages/llmodels/components/deploy-modal.tsx  | 10 ++++++----
 .../playground/components/message-input.tsx     | 16 ++++++++++++++--
 .../components/multiple-chat/message-body.tsx   | 17 ++++++++++++++---
 5 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/src/components/audio-player/simple-audio.tsx b/src/components/audio-player/simple-audio.tsx
index 87eaeae8..9016cc69 100644
--- a/src/components/audio-player/simple-audio.tsx
+++ b/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;
diff --git a/src/pages/dashboard/components/over-view.tsx b/src/pages/dashboard/components/over-view.tsx
index f60f27b4..43c91279 100644
--- a/src/pages/dashboard/components/over-view.tsx
+++ b/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%' }}
diff --git a/src/pages/llmodels/components/deploy-modal.tsx b/src/pages/llmodels/components/deploy-modal.tsx
index 56695873..e30bcc31 100644
--- a/src/pages/llmodels/components/deploy-modal.tsx
+++ b/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 || {};
-    return _.omit(defaultSpec, [
-      'cpu_offloading',
-      'distributed_inference_across_workers'
+    const defaultSpec = _.get(item.evaluateResult?.default_spec, [
+      'backend_version',
+      'backend_parameters',
+      'env'
     ]);
+
+    return defaultSpec;
   };
 
   const getCategory = (item: any) => {
diff --git a/src/pages/playground/components/message-input.tsx b/src/pages/playground/components/message-input.tsx
index 500accdf..dae1104c 100644
--- a/src/pages/playground/components/message-input.tsx
+++ b/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
diff --git a/src/pages/playground/components/multiple-chat/message-body.tsx b/src/pages/playground/components/multiple-chat/message-body.tsx
index 9ab3e164..907e3506 100644
--- a/src/pages/playground/components/multiple-chat/message-body.tsx
+++ b/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