From eea53a6e9eb9c78994c80f885ba138812e3229ef Mon Sep 17 00:00:00 2001
From: josc146 <josStorer@outlook.com>
Date: Fri, 8 Dec 2023 15:34:45 +0800
Subject: [PATCH] add available tag for model downloaded configs

---
 frontend/src/components/ConfigSelector.tsx | 10 ++++++++--
 frontend/src/pages/Configs.tsx             |  9 ++++++++-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/ConfigSelector.tsx b/frontend/src/components/ConfigSelector.tsx
index ae7ebf6..1be1f0f 100644
--- a/frontend/src/components/ConfigSelector.tsx
+++ b/frontend/src/components/ConfigSelector.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { observer } from 'mobx-react-lite';
-import { Dropdown, Option } from '@fluentui/react-components';
+import { Dropdown, Option, PresenceBadge } from '@fluentui/react-components';
 import commonStore from '../stores/commonStore';
 
 export const ConfigSelector: FC<{ size?: 'small' | 'medium' | 'large' }> = observer(({ size }) => {
@@ -12,7 +12,13 @@ export const ConfigSelector: FC<{ size?: 'small' | 'medium' | 'large' }> = obser
         commonStore.setCurrentConfigIndex(Number(data.optionValue));
     }}>
     {commonStore.modelConfigs.map((config, index) =>
-      <Option key={index} value={index.toString()}>{config.name}</Option>
+      <Option key={index} value={index.toString()} text={config.name}>
+        <div className="flex justify-between grow">
+          {config.name}
+          {commonStore.modelSourceList.find(item => item.name === config.modelParameters.modelName)?.isComplete
+            && <PresenceBadge status="available" />}
+        </div>
+      </Option>
     )}
   </Dropdown>;
 });
\ No newline at end of file
diff --git a/frontend/src/pages/Configs.tsx b/frontend/src/pages/Configs.tsx
index fe83cb4..348c168 100644
--- a/frontend/src/pages/Configs.tsx
+++ b/frontend/src/pages/Configs.tsx
@@ -8,6 +8,7 @@ import {
   Input,
   Label,
   Option,
+  PresenceBadge,
   Select,
   Switch,
   Text
@@ -106,7 +107,13 @@ const Configs: FC = observer(() => {
               }
             }}>
             {commonStore.modelConfigs.map((config, index) =>
-              <Option key={index} value={index.toString()}>{config.name}</Option>
+              <Option key={index} value={index.toString()} text={config.name}>
+                <div className="flex justify-between grow">
+                  {config.name}
+                  {commonStore.modelSourceList.find(item => item.name === config.modelParameters.modelName)?.isComplete
+                    && <PresenceBadge status="available" />}
+                </div>
+              </Option>
             )}
           </Dropdown>
           <ToolTipButton desc={t('New Config')} icon={<AddCircle20Regular />} onClick={() => {