From ec414ccdcf03c54f40468c0b27f52a092f4650a3 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Tue, 28 Jan 2025 14:37:07 +0700
Subject: [PATCH] enhancement: unconsistent text color model name, hidden
 api-key field, and chat completion field under advance setting

---
 .../Settings/Engines/RemoteEngineSettings.tsx | 102 +++++++++++-------
 .../Settings/MyModels/MyModelList/index.tsx   |   3 +-
 2 files changed, 65 insertions(+), 40 deletions(-)

diff --git a/web/screens/Settings/Engines/RemoteEngineSettings.tsx b/web/screens/Settings/Engines/RemoteEngineSettings.tsx
index ea2b90b164..bafe60a8b8 100644
--- a/web/screens/Settings/Engines/RemoteEngineSettings.tsx
+++ b/web/screens/Settings/Engines/RemoteEngineSettings.tsx
@@ -20,7 +20,7 @@ import { ScrollArea, Input, TextArea } from '@janhq/joi'
 import { useAtomValue } from 'jotai'
 
 import { set } from 'lodash'
-import { ChevronDown, ChevronRight } from 'lucide-react'
+import { ChevronDown, ChevronRight, Eye, EyeOff } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
 
 import { updateEngine, useGetEngines } from '@/hooks/useEngineManagement'
@@ -36,7 +36,7 @@ const RemoteEngineSettings = ({
 }) => {
   const { engines, mutate } = useGetEngines()
   const downloadedModels = useAtomValue(downloadedModelsAtom)
-
+  const [showApiKey, setShowApiKey] = useState(false)
   const remoteModels = downloadedModels.filter((e) => e.engine === name)
   const [isActiveAdvanceSetting, setisActiveAdvanceSetting] = useState(false)
 
@@ -147,42 +147,35 @@ const RemoteEngineSettings = ({
                   </p>
                 </div>
                 <div className="w-full">
-                  <Input
-                    placeholder="Enter API Key"
-                    value={data?.api_key}
-                    onChange={(e) => handleChange('api_key', e.target.value)}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div className="block w-full px-4">
-        <div className="mb-3 mt-4 border-b border-[hsla(var(--app-border))] pb-4">
-          <div className="flex w-full flex-col items-start justify-between sm:flex-row">
-            <div className="w-full flex-shrink-0 space-y-1.5">
-              <div className="flex items-start justify-between gap-x-2">
-                <div className="w-full sm:w-3/4">
-                  <h6 className="line-clamp-1 font-semibold">
-                    Chat Completion URL
-                  </h6>
-                  <p className="mt-1 text-[hsla(var(--text-secondary))]">
-                    Enter your chat completion URL.
-                  </p>
-                </div>
-                <div className="w-full">
-                  <Input
-                    placeholder="Enter Chat Completion URL"
-                    value={data?.metadata.transform_req.chat_completions.url}
-                    onChange={(e) =>
-                      handleChange(
-                        'metadata.transform_req.chat_completions.url',
-                        e.target.value
-                      )
-                    }
-                  />
+                  <div className="relative">
+                    {data?.api_key.length > 0 && (
+                      <div className="absolute right-4 top-1/2 z-10 -translate-y-1/2">
+                        <div
+                          className="cursor-pointer"
+                          onClick={() => setShowApiKey(!showApiKey)}
+                        >
+                          {showApiKey ? (
+                            <EyeOff
+                              size={14}
+                              className="text-[hsla(var(--text-seconday))]"
+                            />
+                          ) : (
+                            <Eye
+                              size={14}
+                              className="text-[hsla(var(--text-seconday))]"
+                            />
+                          )}
+                        </div>
+                      </div>
+                    )}
+                    <Input
+                      placeholder="Enter API Key"
+                      type={showApiKey ? 'text' : 'password'}
+                      value={data?.api_key}
+                      className="pr-10"
+                      onChange={(e) => handleChange('api_key', e.target.value)}
+                    />
+                  </div>
                 </div>
               </div>
             </div>
@@ -252,6 +245,39 @@ const RemoteEngineSettings = ({
 
       {isActiveAdvanceSetting && (
         <div>
+          <div className="block w-full px-4">
+            <div className="mb-3 mt-4 border-b border-[hsla(var(--app-border))] pb-4">
+              <div className="flex w-full flex-col items-start justify-between sm:flex-row">
+                <div className="w-full flex-shrink-0 space-y-1.5">
+                  <div className="flex items-start justify-between gap-x-2">
+                    <div className="w-full sm:w-3/4">
+                      <h6 className="line-clamp-1 font-semibold">
+                        Chat Completion URL
+                      </h6>
+                      <p className="mt-1 text-[hsla(var(--text-secondary))]">
+                        Enter your chat completion URL.
+                      </p>
+                    </div>
+                    <div className="w-full">
+                      <Input
+                        placeholder="Enter Chat Completion URL"
+                        value={
+                          data?.metadata.transform_req.chat_completions.url
+                        }
+                        onChange={(e) =>
+                          handleChange(
+                            'metadata.transform_req.chat_completions.url',
+                            e.target.value
+                          )
+                        }
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
           <div className="block w-full px-4">
             <div className="mb-3 mt-4 border-b border-[hsla(var(--app-border))] pb-4">
               <div className="flex w-full flex-col items-start justify-between sm:flex-row">
diff --git a/web/screens/Settings/MyModels/MyModelList/index.tsx b/web/screens/Settings/MyModels/MyModelList/index.tsx
index 6824d1471f..314f7eccbf 100644
--- a/web/screens/Settings/MyModels/MyModelList/index.tsx
+++ b/web/screens/Settings/MyModels/MyModelList/index.tsx
@@ -57,8 +57,7 @@ const MyModelList = ({ model }: Props) => {
             <h6
               className={twMerge(
                 'font-medium lg:line-clamp-1 lg:min-w-[280px] lg:max-w-[280px]',
-                !isLocalEngine(engines, model.engine) &&
-                  'max-w-none text-[hsla(var(--text-secondary))]'
+                !isLocalEngine(engines, model.engine) && 'max-w-none'
               )}
               title={model.name}
             >