fix: chart resize

src/pages/dashboard/components/resource-utilization.tsx

@@ -37,78 +37,6 @@ const TypeKeyMap = {
   }
 };
 
-const option = {
-  title: {
-    text: ''
-  },
-  legend: {
-    itemWidth: 8,
-    itemHeight: 8,
-    data: []
-  },
-  grid: {
-    left: 0,
-    right: 20,
-    bottom: 20,
-    containLabel: true
-  },
-  tooltip: {
-    trigger: 'axis',
-    formatter(params: any) {
-      let result = `<span class="tooltip-x-name">${params[0].axisValue}</span>`;
-      params.forEach((item: any) => {
-        result += `<span class="tooltip-item">
-       <span class="tooltip-item-name">
-         <span style="display:inline-block;margin-right:5px;border-radius:8px;width:8px;height:8px;background-color:${item.color};"></span>
-         <span class="tooltip-title">${item.seriesName}</span>:
-       </span>
-        <span class="tooltip-value">${item.data.value}</span>
-        </span>`;
-      });
-      return `<div class="tooltip-wrapper">${result}</div>`;
-    }
-  },
-  xAxis: {
-    type: 'category',
-    boundaryGap: true,
-    axisTick: {
-      show: true,
-      lineStyle: {
-        color: chartColorMap.tickLineColor
-      }
-    },
-    axisLabel: {
-      color: chartColorMap.axislabelColor,
-      // fontFamily: 'unset',
-      fontSize: 12
-    },
-    axisLine: {
-      show: false
-    },
-    data: []
-  },
-  yAxis: {
-    max: 100,
-    min: 0,
-    splitLine: {
-      show: true,
-      lineStyle: {
-        type: 'dashed'
-      }
-    },
-    axisLabel: {
-      color: chartColorMap.axislabelColor,
-      // fontFamily: 'unset',
-      fontSize: 12
-    },
-    axisTick: {
-      show: false
-    },
-    type: 'value'
-  },
-  series: []
-};
-
 const UtilizationOvertime: React.FC = () => {
   const intl = useIntl();
   const data = useContext(DashboardContext)?.system_load?.history || {};

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

@@ -353,6 +353,7 @@ const MessageInput: React.FC<MessageInputProps> = ({
               type="text"
               icon={<ClearOutlined />}
               size="middle"
+              disabled={loading}
               onClick={handleClearAll}
             ></Button>
           </Tooltip>

src/pages/playground/components/multiple-chat/model-item.tsx

@@ -217,7 +217,6 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
     };
 
     const handleApplyToAllModels = (e: any) => {
-      console.log('checkbox change:', e.target.checked);
       isApplyToAllModels.current = e.target.checked;
       if (e.target.checked) {
         setGlobalParams({
@@ -334,7 +333,6 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
     }, [modelList, intl]);
 
     useEffect(() => {
-      console.log('globalParams:', globalParams.model, globalParams);
       setParams({
         ...params,
         model: model,
@@ -384,7 +382,7 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
         <div className="header">
           <span className="title">
             <Select
-              style={{ minWidth: '120px', maxWidth: '200px' }}
+              style={{ minWidth: '120px', maxWidth: '180px' }}
               variant="borderless"
               options={modelFullList}
               onChange={handleModelChange}
@@ -404,7 +402,7 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
               }}
             ></Select>
           </span>
-          <ReferenceParams usage={tokenResult}></ReferenceParams>
+          <ReferenceParams usage={tokenResult} scaleable></ReferenceParams>
           <span className="action">
             <Dropdown
               menu={{

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

@@ -1,11 +1,13 @@
 import { WarningOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Alert, Space, Tooltip } from 'antd';
+import classNames from 'classnames';
 import _ from 'lodash';
 import '../style/reference-params.less';
 
 interface ReferenceParamsProps {
   showOutput?: boolean;
+  scaleable?: boolean;
   usage: {
     error?: boolean;
     errorMessage?: string;
@@ -20,7 +22,7 @@ interface ReferenceParamsProps {
 
 const ReferenceParams = (props: ReferenceParamsProps) => {
   const intl = useIntl();
-  const { usage, showOutput = true } = props;
+  const { usage, showOutput = true, scaleable } = props;
   if (!usage || _.isEmpty(usage)) {
     return null;
   }
@@ -41,8 +43,16 @@ const ReferenceParams = (props: ReferenceParamsProps) => {
     );
   }
   return (
-    <div className="reference-params">
-      <span className="usage">
+    <div
+      className={classNames('reference-params', {
+        scaleable: scaleable
+      })}
+    >
+      <span
+        className={classNames('usage', {
+          scaleable: scaleable
+        })}
+      >
         <Tooltip
           title={
             <Space>
@@ -65,7 +75,11 @@ const ReferenceParams = (props: ReferenceParamsProps) => {
       </span>
 
       {showOutput && (
-        <span className="usage">
+        <span
+          className={classNames('usage', {
+            scaleable: scaleable
+          })}
+        >
           <Tooltip
             title={
               <Space>

src/pages/playground/style/model-item.less

@@ -4,6 +4,7 @@
   border: 1px solid var(--ant-color-border);
   border-radius: var(--border-radius-base);
   height: 100%;
+  background-color: var(--color-white-1);
 
   .header {
     padding-inline: 2px 16px;

src/pages/playground/style/reference-params.less

@@ -6,7 +6,16 @@
   color: var(--ant-orange);
   gap: 20px;
 
+  &.scaleable {
+    gap: 15px;
+  }
+
   .usage {
     cursor: pointer;
+    line-height: 16px;
+
+    &.scaleable {
+      transform: scale(0.9);
+    }
   }
 }