Function ModelSelect

agent-flow/src/components/llm/Model.jsx:27–66

({shapeId, model, serviceName, tag, disabled, modelOptions})

 * @constructor
 */
const ModelSelect = ({shapeId, model, serviceName, tag, disabled, modelOptions}) => {
  const shape = useShapeContext();
  const {t} = useTranslation();
  const dispatch = useDispatch();

  const handleSelectClick = (event) => {
    event.stopPropagation(); // 阻止事件冒泡
  };

  return (<>
    <Form.Item
      className='jade-form-item'
      name={`model-${shapeId}`}
      label={t('model')}
      rules={[{required: true, message: t('pleaseSelectTheModelToBeUsed')}, {
        validator: (_, value) => {
          const validateInfo = shape.graph.validateInfo?.find(node => node?.nodeId === shape.id);
          if (value && !(validateInfo?.isValid ?? true)) {
            const modelConfigCheck = validateInfo.configChecks?.find(configCheck => configCheck.configName === 'accessInfo');
            if (modelConfigCheck && modelConfigCheck.serviceName === serviceName?.value && modelConfigCheck.tag === tag?.value) {
              return Promise.reject(new Error(`${modelConfigCheck.serviceName} ${t('selectedValueNotExist')}`));
            }
          }
          return Promise.resolve();
        },
      }]}
      initialValue={(serviceName?.value && tag?.value ? `${serviceName.value}&&${tag.value}` : null) ?? model?.value ?? serviceName?.value ?? ''} // 当组件套在Form.Item中的时候，内部组件的初始值使用Form.Item的initialValue进行赋值
      validateTrigger='onBlur'
    >
      <JadeStopPropagationSelect
        disabled={disabled}
        className='jade-select'
        onClick={handleSelectClick} // 点击下拉框时阻止事件冒泡
        onChange={(e) => dispatch({type: 'changeAccessInfoConfig', value: e})}
        options={modelOptions}
        dropdownMatchSelectWidth={false}
      />
    </Form.Item>
  </>);
};

/**
 * 温度输入组件