Update App.tsx

App.tsx

@@ -142,6 +142,11 @@ const App: React.FC = () => {
   const [channels, setChannels] = useState<ApiChannel[]>([]);
   const [models, setModels] = useState<AiModel[]>([]);
   const [isConfigManagerOpen, setIsConfigManagerOpen] = useState<boolean>(false);
+  const [updateNotification, setUpdateNotification] = useState<{
+  newChannels: number;
+  newModels: number;
+  newRoles: number;
+} | null>(null);
   const [isRoleSelectorOpen, setIsRoleSelectorOpen] = useState<boolean>(false);
 
   const [isDiscussionActive, setIsDiscussionActive] = useState<boolean>(false);
@@ -179,31 +184,46 @@ const App: React.FC = () => {
   };
 
   const loadConfiguration = () => {
-    const allChannels = ConfigManager.getChannels();
-    const allModels = ConfigManager.getModels();
-    const allRoles = ConfigManager.getActiveRoles();
+  // 检查是否有配置更新
+  const updateInfo = ConfigManager.getLastUpdateInfo();
+  if (updateInfo) {
+    setUpdateNotification({
+      newChannels: updateInfo.newChannels,
+      newModels: updateInfo.newModels,
+      newRoles: updateInfo.newRoles
+    });
     
-    setChannels(allChannels);
-    setModels(allModels);
+    // 5秒后自动关闭通知
+    setTimeout(() => {
+      setUpdateNotification(null);
+    }, 5000);
+  }
+
+  const allChannels = ConfigManager.getChannels();
+  const allModels = ConfigManager.getModels();
+  const allRoles = ConfigManager.getActiveRoles();
+  
+  setChannels(allChannels);
+  setModels(allModels);
+  
+  const rolesWithModelsAndChannels: ActiveRole[] = allRoles.map(role => {
+    const model = allModels.find(m => m.id === role.modelId);
+    if (!model) {
+      console.warn(`Role ${role.name} references non-existent model ${role.modelId}`);
+      return null;
+    }
     
-    const rolesWithModelsAndChannels: ActiveRole[] = allRoles.map(role => {
-      const model = allModels.find(m => m.id === role.modelId);
-      if (!model) {
-        console.warn(`Role ${role.name} references non-existent model ${role.modelId}`);
-        return null;
-      }
-      
-      const channel = allChannels.find(ch => ch.id === model.channelId);
-      if (!channel) {
-        console.warn(`Model ${model.name} references non-existent channel ${model.channelId}`);
-        return null;
-      }
-      
-      return { ...role, model, channel };
-    }).filter(Boolean) as ActiveRole[];
+    const channel = allChannels.find(ch => ch.id === model.channelId);
+    if (!channel) {
+      console.warn(`Model ${model.name} references non-existent channel ${model.channelId}`);
+      return null;
+    }
     
-    setActiveRoles(rolesWithModelsAndChannels);
-  };
+    return { ...role, model, channel };
+  }).filter(Boolean) as ActiveRole[];
+  
+  setActiveRoles(rolesWithModelsAndChannels);
+};
 
   useEffect(() => {
     loadConfiguration();
@@ -775,6 +795,29 @@ const App: React.FC = () => {
 
   return (
     <div className="flex flex-col h-screen max-w-7xl mx-auto bg-gray-900 shadow-2xl rounded-lg overflow-hidden">
+    {updateNotification && (
+  <div className="fixed top-4 left-1/2 transform -translate-x-1/2 bg-green-700 text-white px-6 py-3 rounded-lg shadow-lg z-50">
+    <div className="flex items-center space-x-3">
+      <div className="flex-shrink-0">
+        <Check size={24} className="text-white" />
+      </div>
+      <div>
+        <p className="font-semibold">配置已更新！</p>
+        <p className="text-sm">
+          {updateNotification.newChannels > 0 && `新增 ${updateNotification.newChannels} 个渠道 `}
+          {updateNotification.newModels > 0 && `新增 ${updateNotification.newModels} 个模型 `}
+          {updateNotification.newRoles > 0 && `新增 ${updateNotification.newRoles} 个角色`}
+        </p>
+      </div>
+      <button
+        onClick={() => setUpdateNotification(null)}
+        className="flex-shrink-0 ml-4 hover:bg-green-600 rounded p-1"
+      >
+        <X size={20} />
+      </button>
+    </div>
+  </div>
+)}
       <header className="p-4 bg-gray-900 border-b border-gray-700 flex items-center justify-between shrink-0 space-x-2 md:space-x-4 flex-wrap">
         <div className="flex items-center shrink-0">
           <BotMessageSquare size={28} className="mr-2 md:mr-3 text-sky-400" />