Merge pull request #1751 from ModelEngine-Group/wmc/bugfix_1117

Author: Phinease

frontend/app/[locale]/models/components/appConfig.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useRef, useState, useEffect, useCallback } from 'react';
 import dynamic from 'next/dynamic';
 import { useTranslation } from 'react-i18next';
 
@@ -39,8 +39,6 @@ export const AppConfigSection: React.FC = () => {
   // Add user input state tracking
   const isUserTypingAppName = useRef(false);
   const isUserTypingDescription = useRef(false);
-  const appNameUpdateTimer = useRef<NodeJS.Timeout | null>(null);
-  const descriptionUpdateTimer = useRef<NodeJS.Timeout | null>(null);
 
   // Avatar-related state
   const [isAvatarModalOpen, setIsAvatarModalOpen] = useState(false);
@@ -67,6 +65,22 @@ export const AppConfigSection: React.FC = () => {
 
   const fileInputRef = useRef<HTMLInputElement>(null);
 
+  const triggerAutoSave = useCallback(() => {
+    const runSave = async () => {
+      try {
+        const ok = await configService.saveConfigToBackend(getConfig() as any);
+        if (!ok) {
+          message.error(t("setup.page.error.saveConfig"));
+        }
+      } catch (error) {
+        message.error(t("setup.page.error.saveConfig"));
+        log.error("Failed to auto save app configuration", error);
+      }
+    };
+
+    void runSave();
+  }, [getConfig, message, t]);
+
   // Add configuration change listener, synchronize local state when config is loaded from backend
   useEffect(() => {
     const handleConfigChanged = (event: any) => {
@@ -139,18 +153,6 @@ export const AppConfigSection: React.FC = () => {
     };
   }, []);
 
-  // Clean up timers
-  useEffect(() => {
-    return () => {
-      if (appNameUpdateTimer.current) {
-        clearTimeout(appNameUpdateTimer.current);
-      }
-      if (descriptionUpdateTimer.current) {
-        clearTimeout(descriptionUpdateTimer.current);
-      }
-    };
-  }, []);
-
   // Handle basic app config changes
   const handleAppNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newAppName = e.target.value;
@@ -162,25 +164,12 @@ export const AppConfigSection: React.FC = () => {
       setAppNameError(false);
     }
 
-    // Clear previous timer
-    if (appNameUpdateTimer.current) {
-      clearTimeout(appNameUpdateTimer.current);
-    }
-
-    // Set debounced update
-    appNameUpdateTimer.current = setTimeout(() => {
-      updateAppConfig({ appName: newAppName });
-      isUserTypingAppName.current = false;
-    }, 500);
   };
 
   const handleAppNameBlur = () => {
-    // Clear timer, update immediately
-    if (appNameUpdateTimer.current) {
-      clearTimeout(appNameUpdateTimer.current);
-    }
     updateAppConfig({ appName: localAppName });
     isUserTypingAppName.current = false;
+    triggerAutoSave();
   };
 
   const handleDescriptionChange = (
@@ -189,26 +178,12 @@ export const AppConfigSection: React.FC = () => {
     const newDescription = e.target.value;
     isUserTypingDescription.current = true;
     setLocalAppDescription(newDescription);
-
-    // Clear previous timer
-    if (descriptionUpdateTimer.current) {
-      clearTimeout(descriptionUpdateTimer.current);
-    }
-
-    // Set debounced update
-    descriptionUpdateTimer.current = setTimeout(() => {
-      updateAppConfig({ appDescription: newDescription });
-      isUserTypingDescription.current = false;
-    }, 500);
   };
 
   const handleDescriptionBlur = () => {
-    // Clear timer, update immediately
-    if (descriptionUpdateTimer.current) {
-      clearTimeout(descriptionUpdateTimer.current);
-    }
     updateAppConfig({ appDescription: localAppDescription });
     isUserTypingDescription.current = false;
+    triggerAutoSave();
   };
 
   // Open avatar selection modal

frontend/app/[locale]/models/components/model/ModelAddDialog.tsx

@@ -1093,6 +1093,8 @@ export const ModelAddDialog = ({
         open={settingsModalVisible}
         onCancel={() => setSettingsModalVisible(false)}
         onOk={handleSettingsSave}
+        cancelText={t("common.cancel")}
+        okText={t("common.ok")}
         destroyOnClose
       >
         <div className="space-y-3">

frontend/app/[locale]/models/components/model/ModelDeleteDialog.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { Modal, Button, Switch, App, Tooltip, Input } from "antd";
@@ -57,6 +57,7 @@ export const ModelDeleteDialog = ({
   const [selectedModelForSettings, setSelectedModelForSettings] =
     useState<any>(null);
   const [modelMaxTokens, setModelMaxTokens] = useState("4096");
+  const [providerModelSearchTerm, setProviderModelSearchTerm] = useState("");
 
   // Get model color scheme
   const getModelColorScheme = (
@@ -305,6 +306,7 @@ export const ModelDeleteDialog = ({
       return;
     }
     setSelectedSource(source);
+    setProviderModelSearchTerm("");
   };
 
   const handleEditModel = (model: ModelOption) => {
@@ -415,8 +417,28 @@ export const ModelDeleteDialog = ({
     setProviderModels([]);
     setPendingSelectedProviderIds(new Set());
     setMaxTokens(0);
+    setProviderModelSearchTerm("");
     onClose();
   };
+  const filteredProviderModels = useMemo(() => {
+    const keyword = providerModelSearchTerm.trim().toLowerCase();
+    if (!keyword) {
+      return providerModels;
+    }
+    return providerModels.filter((model) => {
+      const candidates = [
+        model?.id,
+        model?.model_name,
+        model?.model_tag,
+        model?.description,
+      ];
+      return candidates.some(
+        (text) =>
+          typeof text === "string" && text.toLowerCase().includes(keyword)
+      );
+    });
+  }, [providerModels, providerModelSearchTerm]);
+
 
   // Handle provider config save
   const handleProviderConfigSave = async ({
@@ -621,6 +643,7 @@ export const ModelDeleteDialog = ({
                   onClick={() => {
                     setDeletingModelType(type);
                     setSelectedSource(null);
+                    setProviderModelSearchTerm("");
                     // Initialize maxTokens with a value from existing models of this type
                     const existingModel = customModels.find(
                       (model) => model.type === type
@@ -768,6 +791,7 @@ export const ModelDeleteDialog = ({
               onClick={() => {
                 setSelectedSource(null);
                 setProviderModels([]);
+                setProviderModelSearchTerm("");
               }}
               className="text-blue-500 hover:text-blue-700 flex items-center"
             >
@@ -819,7 +843,25 @@ export const ModelDeleteDialog = ({
           {selectedSource === MODEL_SOURCES.SILICON &&
           providerModels.length > 0 ? (
             <div className="max-h-60 overflow-y-auto border border-gray-200 rounded-md divide-y divide-gray-200">
-              {providerModels.map((providerModel: any) => {
+              {providerModels.length > 0 && (
+                <div className="sticky top-0 z-10 bg-white p-2">
+                  <Input
+                    allowClear
+                    size="small"
+                    placeholder={t("model.dialog.modelList.searchPlaceholder")}
+                    value={providerModelSearchTerm}
+                    onChange={(event) =>
+                      setProviderModelSearchTerm(event.target.value)
+                    }
+                  />
+                </div>
+              )}
+              {filteredProviderModels.length === 0 && (
+                <div className="p-4 text-center text-xs text-gray-500">
+                  {t("model.dialog.modelList.noResults")}
+                </div>
+              )}
+              {filteredProviderModels.map((providerModel: any) => {
                 const checked = pendingSelectedProviderIds.has(
                   providerModel.id
                 );
@@ -1017,6 +1059,8 @@ export const ModelDeleteDialog = ({
         open={settingsModalVisible}
         onCancel={() => setSettingsModalVisible(false)}
         onOk={handleSettingsSave}
+        cancelText={t("common.button.cancel")}
+        okText={t("common.button.save")}
         destroyOnClose
       >
         <div className="space-y-3">