From 01a69ff32b5315ec72d450538a70cadc1891786a Mon Sep 17 00:00:00 2001
From: thanhtunguet <thanhtung.uet@gmail.com>
Date: Sat, 31 Jan 2026 21:33:26 +0700
Subject: [PATCH] refactor(AuthFilesPage): optimize provider list generation
 using useMemo for better performance

---
 .../ModelMappingDiagram.module.scss           | 10 +++--
 src/pages/AuthFilesPage.tsx                   | 42 ++++++++++---------
 2 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/src/components/modelAlias/ModelMappingDiagram.module.scss b/src/components/modelAlias/ModelMappingDiagram.module.scss
index 3cfd55c..02a2cc7 100644
--- a/src/components/modelAlias/ModelMappingDiagram.module.scss
+++ b/src/components/modelAlias/ModelMappingDiagram.module.scss
@@ -1,3 +1,5 @@
+@use '../../styles/variables' as *;
+
 .container {
   display: flex;
   position: relative;
@@ -143,7 +145,8 @@
   }
 }
 
-.sourceItem, .aliasItem {
+.sourceItem,
+.aliasItem {
   cursor: grab;
 
   &:active {
@@ -175,8 +178,7 @@
   right: -3px;
 }
 
-.aliasItem {
-}
+.aliasItem {}
 
 .providerBadge {
   font-size: 11px;
@@ -320,4 +322,4 @@
   &:hover {
     background: var(--bg-error-light);
   }
-}
+}
\ No newline at end of file
diff --git a/src/pages/AuthFilesPage.tsx b/src/pages/AuthFilesPage.tsx
index 09ed9b5..0e91fa0 100644
--- a/src/pages/AuthFilesPage.tsx
+++ b/src/pages/AuthFilesPage.tsx
@@ -249,29 +249,31 @@ export function AuthFilesPage() {
 
   const disableControls = connectionStatus !== 'connected';
 
+  const providerList = useMemo(() => {
+    const providers = new Set<string>();
+
+    Object.keys(modelAlias).forEach((provider) => {
+      const key = provider.trim().toLowerCase();
+      if (key) providers.add(key);
+    });
+
+    files.forEach((file) => {
+      if (typeof file.type === 'string') {
+        const key = file.type.trim().toLowerCase();
+        if (key) providers.add(key);
+      }
+      if (typeof file.provider === 'string') {
+        const key = file.provider.trim().toLowerCase();
+        if (key) providers.add(key);
+      }
+    });
+    return Array.from(providers);
+  }, [files, modelAlias]);
+
   useEffect(() => {
     let cancelled = false;
 
     const loadAllModels = async () => {
-      const providers = new Set<string>();
-
-      Object.keys(modelAlias).forEach((provider) => {
-        const key = provider.trim().toLowerCase();
-        if (key) providers.add(key);
-      });
-
-      files.forEach((file) => {
-        if (typeof file.type === 'string') {
-          const key = file.type.trim().toLowerCase();
-          if (key) providers.add(key);
-        }
-        if (typeof file.provider === 'string') {
-          const key = file.provider.trim().toLowerCase();
-          if (key) providers.add(key);
-        }
-      });
-
-      const providerList = Array.from(providers);
       if (providerList.length === 0) {
         if (!cancelled) setAllProviderModels({});
         return;
@@ -305,7 +307,7 @@ export function AuthFilesPage() {
     return () => {
       cancelled = true;
     };
-  }, [files, modelAlias]);
+  }, [providerList]);