From c96dc535343f5960bc7a3d118d930e6a6a3a2fcd Mon Sep 17 00:00:00 2001
From: zhaoying <zhaoyingyz@126.com>
Date: Fri, 17 Apr 2026 10:07:45 +0800
Subject: [PATCH] fix(web): model options update

---
 web/src/components/ModelSelect/index.tsx      | 18 ++++++-------
 .../Properties/ModelConfig/index.tsx          | 25 +++++++++++++------
 2 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/web/src/components/ModelSelect/index.tsx b/web/src/components/ModelSelect/index.tsx
index 0b4f671e..e89b8eeb 100644
--- a/web/src/components/ModelSelect/index.tsx
+++ b/web/src/components/ModelSelect/index.tsx
@@ -2,9 +2,9 @@
  * @Author: ZhaoYing 
  * @Date: 2026-03-07 16:49:59 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-04-16 17:46:02
+ * @Last Modified time: 2026-04-17 10:05:23
  */
-import { useEffect, useState, forwardRef, useImperativeHandle } from 'react';
+import { type FC, useEffect, useState } from 'react';
 import { Select, Flex, Space } from 'antd';
 import type { SelectProps } from 'antd/es/select';
 import { useTranslation } from 'react-i18next';
@@ -26,17 +26,13 @@ interface ModelSelectProps extends SelectProps {
   fontClassName?: string;
   isAutoFetch?: boolean;
   initialData?: Model[];
+  updateOptions?: (options: Model[]) => void;
 }
 
-const ModelSelect = forwardRef<ModelSelectRef, ModelSelectProps>((
-  { params, placeholder, fontClassName, isAutoFetch = true, initialData = [], ...props },
-  ref
-) => {
+const ModelSelect: FC<ModelSelectProps> = ({ params, placeholder, fontClassName, isAutoFetch = true, initialData = [], updateOptions, ...props }) => {
   const { t } = useTranslation();
   const [options, setOptions] = useState<Model[]>([]);
 
-  useImperativeHandle(ref, () => ({ options }), [options]);
-
   // Fetch active models whenever params change; stringify for stable deep comparison
   useEffect(() => {
     if (!isAutoFetch) return
@@ -62,6 +58,10 @@ const ModelSelect = forwardRef<ModelSelectRef, ModelSelectProps>((
     );
   };
 
+  useEffect(() => {
+    if (updateOptions) updateOptions([...options, ...initialData]);
+  }, [options, initialData])
+
   return (
     <Select
       placeholder={placeholder ?? t('common.pleaseSelect')}
@@ -91,6 +91,6 @@ const ModelSelect = forwardRef<ModelSelectRef, ModelSelectProps>((
       {...props}
     />
   );
-});
+};
 
 export default ModelSelect;
diff --git a/web/src/views/Workflow/components/Properties/ModelConfig/index.tsx b/web/src/views/Workflow/components/Properties/ModelConfig/index.tsx
index 18ad2521..2da6f266 100644
--- a/web/src/views/Workflow/components/Properties/ModelConfig/index.tsx
+++ b/web/src/views/Workflow/components/Properties/ModelConfig/index.tsx
@@ -1,29 +1,38 @@
-import { type FC, useEffect, useRef, useState } from "react";
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-03-07 14:55:04 
+ * @Last Modified by:   ZhaoYing 
+ * @Last Modified time: 2026-04-17 10:05:32 
+ */
+import { type FC, useEffect, useState } from "react";
 import { useTranslation } from 'react-i18next'
 import { Form, Switch } from 'antd'
 
 import RbSlider from '@/components/RbSlider'
 import RbCard from '@/components/RbCard/Card'
-import ModelSelect, { type ModelSelectRef } from '@/components/ModelSelect'
+import ModelSelect from '@/components/ModelSelect'
 import type { Model } from '@/views/ModelManagement/types';
 
 const ModelConfig: FC = () => {
   const { t } = useTranslation()
   const form = Form.useFormInstance()
   const model_id = Form.useWatch(['model_id'], form)
-  const modelSelectRef = useRef<ModelSelectRef>(null)
   const [selectedModel, setSelectedModel] = useState<Model | null>(null)
+  const [options, setOptions] = useState<Model[]>([])
+
+  const updateOptions = (options: Model[]) => {
+    setOptions(options)
+  }
 
   useEffect(() => {
-    if (model_id && modelSelectRef.current?.options) {
-      const model = modelSelectRef.current?.options.find(item => item.id === model_id)
+    if (model_id && options) {
+      const model = options.find(item => item.id === model_id)
       setSelectedModel(model || null)
       form.setFieldValue('json_output', false)
     } else {
       setSelectedModel(null)
     }
-  }, [model_id, modelSelectRef.current?.options])
-  console.log('ModelConfig', model_id)
+  }, [model_id, options])
 
   return (
     <>
@@ -34,11 +43,11 @@ const ModelConfig: FC = () => {
         required
       >
         <ModelSelect
-          ref={modelSelectRef}
           placeholder={t('common.pleaseSelect')}
           params={{ type: 'llm,chat' }}
           className="rb:w-full!"
           size="small"
+          updateOptions={updateOptions}
         />
       </Form.Item>
       {model_id && (