From 1a21528ece8faa6c9487bdcb1c038e1bf58c0856 Mon Sep 17 00:00:00 2001
From: Jagger <634750802@qq.com>
Date: Thu, 8 Aug 2024 14:58:48 +0800
Subject: [PATCH] ui(frontend): show placeholder for default value

---
 frontend/app/src/components/form/biz.tsx              | 2 ++
 frontend/app/src/components/llm/LlmInfo.tsx           | 6 +++---
 frontend/app/src/components/reranker/RerankerInfo.tsx | 2 +-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/app/src/components/form/biz.tsx b/frontend/app/src/components/form/biz.tsx
index 48724e9e..0a20f383 100644
--- a/frontend/app/src/components/form/biz.tsx
+++ b/frontend/app/src/components/form/biz.tsx
@@ -12,6 +12,7 @@ export const LLMSelect = forwardRef<any, Omit<FormSelectProps, 'config'>>((props
   return (
     <FormSelect
       {...props}
+      placeholder="Default LLM"
       config={{
         options: llms?.items ?? [],
         loading: isLoading,
@@ -31,6 +32,7 @@ export const RerankerSelect = forwardRef<any, Omit<FormSelectProps, 'config'>>((
   return (
     <FormSelect
       {...props}
+      placeholder="Default Reranker Model"
       config={{
         options: rerankers?.items ?? [],
         loading: isLoading,
diff --git a/frontend/app/src/components/llm/LlmInfo.tsx b/frontend/app/src/components/llm/LlmInfo.tsx
index 41f0b1c2..5bd95bae 100644
--- a/frontend/app/src/components/llm/LlmInfo.tsx
+++ b/frontend/app/src/components/llm/LlmInfo.tsx
@@ -10,16 +10,16 @@ export function LlmInfo ({ reverse = false, id }: { reverse?: boolean, id: numbe
   const { llm, isLoading } = useLlm(id);
 
   if (isLoading) {
-    return <Loader2Icon className='size-4 animate-spin repeat-infinite'/>
+    return <Loader2Icon className="size-4 animate-spin repeat-infinite" />;
   }
 
   if (!llm) {
-    return <span className='text-muted-foreground'>--</span>;
+    return <Badge variant='outline' className="text-muted-foreground">Default LLM</Badge>;
   }
 
   return (
     <span className={cn('flex gap-1 items-center', reverse && 'flex-row-reverse')}>
-      <Badge variant="secondary"><span className='font-bold'>{llm.provider}</span>:<span className='opacity-50'>{llm.model}</span></Badge>
+      <Badge variant="secondary"><span className="font-bold">{llm.provider}</span>:<span className="opacity-50">{llm.model}</span></Badge>
       <Link className={badgeVariants()} href={`/llms/${llm.id}`}>{llm.name}</Link>
     </span>
   );
diff --git a/frontend/app/src/components/reranker/RerankerInfo.tsx b/frontend/app/src/components/reranker/RerankerInfo.tsx
index d7721213..d08dc2c0 100644
--- a/frontend/app/src/components/reranker/RerankerInfo.tsx
+++ b/frontend/app/src/components/reranker/RerankerInfo.tsx
@@ -14,7 +14,7 @@ export function RerankerInfo ({ reverse = false, id }: { reverse?: boolean, id:
   }
 
   if (!reranker) {
-    return <span className="text-muted-foreground">--</span>;
+    return <Badge variant='outline' className="text-muted-foreground">Default Reranker Model</Badge>;
   }
 
   return (