chore: diff envs in editing deployment

src/pages/benchmark/hooks/use-column-settings.tsx

@@ -383,15 +383,6 @@ const useColumnSettings = (options: {
         </AutoTooltip>
       )
     },
-    {
-      title: renderTitle(intl.formatMessage({ id: 'benchmark.table.dataset' })),
-      dataIndex: 'dataset_name',
-      render: (text: string) => (
-        <AutoTooltip ghost minWidth={20}>
-          {text}
-        </AutoTooltip>
-      )
-    },
     {
       title: (
         <Typography.Text ellipsis={{ tooltip: true }}>
@@ -406,6 +397,15 @@ const useColumnSettings = (options: {
         </AutoTooltip>
       )
     },
+    {
+      title: renderTitle(intl.formatMessage({ id: 'benchmark.table.dataset' })),
+      dataIndex: 'dataset_name',
+      render: (text: string) => (
+        <AutoTooltip ghost minWidth={20}>
+          {text}
+        </AutoTooltip>
+      )
+    },
     {
       title: renderTitle(intl.formatMessage({ id: 'benchmark.table.gpu' })),
       dataIndex: 'gpu_summary',

src/pages/llmodels/forms/backend.tsx

@@ -10,6 +10,7 @@ import { backendTipsList } from '../config';
 import { backendOptionsMap } from '../config/backend-parameters';
 import { useFormContext } from '../config/form-context';
 import useCompareEnvs from '../hooks/use-compare-envs';
+import EnvsOverridePopover from './envs-override-popover';
 
 const CaretDownWrapper = styled.span`
   display: flex;
@@ -30,6 +31,7 @@ const BackendFields: React.FC = () => {
   const form = Form.useFormInstance();
   const {
     action,
+    initialValues,
     onValuesChange,
     backendOptions,
     flatBackendOptions,
@@ -37,9 +39,15 @@ const BackendFields: React.FC = () => {
   } = useFormContext();
   const backend = Form.useWatch('backend', form);
   const [showDeprecated, setShowDeprecated] = React.useState<boolean>(false);
-  const { openTips, handleToggleTips, handleCompareEnvs } = useCompareEnvs();
+  const { openTips, diffEnvs, handleCloseTips, handleCompareEnvs } =
+    useCompareEnvs();
 
   const handleBackendVersionOnChange = (value: any, option: any) => {
+    // const oldEnvs = _.get(initialValues, 'env', {});
+    // const newEnvs = option.data?.env || {};
+
+    // handleCompareEnvs(oldEnvs, newEnvs);
+
     if (Object.keys(option.data?.env || {}).length > 0) {
       form.setFieldValue('env', { ...(option?.data?.env || {}) });
     }
@@ -160,6 +168,14 @@ const BackendFields: React.FC = () => {
     );
   };
 
+  const handleOnSaveEnvsOverride = (envs: Record<string, any>) => {
+    form.setFieldsValue({
+      env: { ...envs }
+    });
+    onValuesChange?.({}, form.getFieldsValue());
+    handleCloseTips();
+  };
+
   const optionRender = (option: any) => {
     return option.data.title;
   };
@@ -198,7 +214,17 @@ const BackendFields: React.FC = () => {
         ></SealSelect>
       </Form.Item>
       {backendOptionsMap.custom !== backend && (
-        <Form.Item name="backend_version">
+        <Form.Item
+          name="backend_version"
+          help={
+            openTips && (
+              <EnvsOverridePopover
+                onSave={handleOnSaveEnvsOverride}
+                diffEnvs={diffEnvs}
+              ></EnvsOverridePopover>
+            )
+          }
+        >
           <SealSelect
             allowClear
             showSearch

src/pages/llmodels/forms/envs-override-popover.tsx

@@ -1,34 +1,174 @@
+import OverlayScroller from '@/components/overlay-scroller';
+import SimpleTabel, { ColumnProps } from '@/components/simple-table';
 import { WarningOutlined } from '@ant-design/icons';
-import { Alert, Popover } from 'antd';
+import { useIntl } from '@umijs/max';
-import React from 'react';
+import { Alert, Button, Popover, Radio } from 'antd';
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+
+const Container = styled.div`
+  padding: 8px 12px;
+  padding-right: 4px;
+  .title {
+    font-weight: 500;
+    margin-bottom: 12px;
+  }
+  .btn-wrapper {
+    display: flex;
+    justify-content: flex-end;
+    gap: 16px;
+    align-items: center;
+    padding-top: 12px;
+  }
+  .buttons {
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+  }
+`;
 
 interface EnvsOverridePopoverProps {
-  open: boolean;
+  diffEnvs: {
-  dataList: any[];
+    old: Record<string, any>;
-  onToggle: (open: boolean) => void;
+    new: Record<string, any>;
+  } | null;
+  onSave: (data: Record<string, any>) => void;
 }
 
 const EnvsOverridePopover: React.FC<EnvsOverridePopoverProps> = (props) => {
-  const { open, onToggle } = props;
+  const { diffEnvs, onSave } = props;
+  const [open, setOpen] = React.useState<boolean>(false);
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const [checkedEnvs, setCheckedEnvs] = React.useState<Record<string, any>>({});
+  const intl = useIntl();
+
+  const handleSelectValue = (
+    e: any,
+    { env_name, value }: { env_name: string; value: any }
+  ) => {
+    setCheckedEnvs((prev) => ({
+      ...prev,
+      [env_name]: value
+    }));
+  };
+
+  const columns: ColumnProps[] = [
+    {
+      title: 'Environment Variable',
+      key: 'env_name'
+    },
+    {
+      title: 'Old Value',
+      key: 'old',
+      render: ({ row }) => {
+        return (
+          <Radio
+            onChange={(e) =>
+              handleSelectValue(e, { env_name: row.env_name, value: row.old })
+            }
+            checked={row.checkedValue === row.old}
+          >
+            {row.old}
+          </Radio>
+        );
+      }
+    },
+    {
+      title: 'New Value',
+      key: 'new',
+      render: ({ row }) => {
+        return (
+          <Radio
+            onChange={(e) =>
+              handleSelectValue(e, { env_name: row.env_name, value: row.new })
+            }
+            checked={row.checkedValue === row.new}
+          >
+            {row.new}
+          </Radio>
+        );
+      }
+    }
+  ];
+
+  const dataList = useMemo(() => {
+    if (!diffEnvs) return [];
+    const list: { env_name: string; old: any; new: any; checkedValue?: any }[] =
+      [];
+    Object.keys(diffEnvs.old).forEach((key) => {
+      list.push({
+        env_name: key,
+        old: diffEnvs.old[key],
+        new: diffEnvs.new[key],
+        checkedValue: checkedEnvs[key]
+      });
+    });
+    return list;
+  }, [diffEnvs, checkedEnvs]);
+
+  const onOpenChange = (isOpen: boolean) => {
+    setOpen(isOpen);
+  };
+
+  const handleOnSave = () => {
+    onSave(checkedEnvs);
+    setOpen(false);
+  };
+
   return (
     <Popover
-      content="override envs"
+      arrow={false}
-      onOpenChange={onToggle}
+      content={
+        <Container>
+          <OverlayScroller
+            maxHeight={300}
+            styles={{
+              wrapper: {
+                paddingInlineStart: 0
+              }
+            }}
+          >
+            <SimpleTabel
+              columns={columns}
+              dataSource={dataList}
+              rowKey="env_name"
+              theme="light"
+            />
+          </OverlayScroller>
+          <div className="btn-wrapper">
+            <Button size="middle" onClick={() => setOpen(false)}>
+              {intl.formatMessage({ id: 'common.button.close' })}
+            </Button>
+            <Button size="middle" type="primary" onClick={handleOnSave}>
+              {intl.formatMessage({ id: 'common.button.confirm' })}
+            </Button>
+          </div>
+        </Container>
+      }
+      open={open}
+      getPopupContainer={(triggerNode) => containerRef.current || triggerNode}
+      onOpenChange={onOpenChange}
       trigger={'click'}
       styles={{
+        root: {
+          left: 0,
+          right: 0,
+          width: '100%'
+        },
         container: {
           width: '100%'
         }
       }}
     >
-      <Alert
+      <div ref={containerRef}>
-        onClick={() => onToggle(!open)}
+        <Alert
-        style={{ marginBlock: 16, cursor: 'pointer' }}
+          style={{ marginBlock: 16, cursor: 'pointer' }}
-        icon={<WarningOutlined />}
+          icon={<WarningOutlined />}
-        type="warning"
+          type="warning"
-        showIcon
+          showIcon
-        title={'override envs'}
+          title={'有环境变量冲突，点击查看详情'}
-      ></Alert>
+        ></Alert>
+      </div>
     </Popover>
   );
 };

src/pages/llmodels/hooks/use-compare-envs.ts

@@ -37,16 +37,11 @@ export default function useCompareEnvs() {
     }
   };
 
-  const handleToggleTips = () => {
-    setOpenTips(!openTips);
-  };
-
   return {
     openTips,
     diffEnvs,
     handleOpenTips,
     handleCloseTips,
-    handleCompareEnvs,
+    handleCompareEnvs
-    handleToggleTips
   };
 }

src/pages/maas-provider/config/index.ts

@@ -32,7 +32,7 @@ export const rowActionList = [
   },
   {
     key: 'registerRoute',
-    label: 'providers.table.registerRoute',
+    label: 'routes.button.add',
     icon: icons.CaptivePortal
   },
   {

src/pages/playground/hooks/use-chat-completion.ts

@@ -61,6 +61,7 @@ export default function useChatCompletion(
       _.get(chunk, 'choices.0.delta.content', '') === null
         ? ''
         : _.get(chunk, 'choices.0.delta.content', '');
+    console.log('deltaContent:', deltaContent);
 
     reasonContentRef.current = reasonContentRef.current + deltaReasoningContent;
     contentRef.current = contentRef.current + deltaContent;