Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

enhancement: unconsistent text color model name, hidden api-key field, and chat completion field under advance setting (#4532)

Browse Source
This commit is contained in:
Faisal Amir 2025-01-28 21:45:32 +07:00 committed by GitHub
parent be6de587c5
commit c46e30d001
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 65 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
web/screens/Settings/Engines/RemoteEngineSettings.tsx
View File

@ -20,7 +20,7 @@ import { ScrollArea, Input, TextArea } from '@janhq/joi'
import { useAtomValue } from 'jotai' import { useAtomValue } from 'jotai'
import { set } from 'lodash' import { set } from 'lodash'
import { ChevronDown, ChevronRight } from 'lucide-react' import { ChevronDown, ChevronRight, Eye, EyeOff } from 'lucide-react'
import { twMerge } from 'tailwind-merge' import { twMerge } from 'tailwind-merge'
import { updateEngine, useGetEngines } from '@/hooks/useEngineManagement' import { updateEngine, useGetEngines } from '@/hooks/useEngineManagement'
@ -38,7 +38,7 @@ const RemoteEngineSettings = ({
}) => { }) => {
const { engines, mutate } = useGetEngines() const { engines, mutate } = useGetEngines()
const downloadedModels = useAtomValue(downloadedModelsAtom) const downloadedModels = useAtomValue(downloadedModelsAtom)
const [showApiKey, setShowApiKey] = useState(false)
const remoteModels = downloadedModels.filter((e) => e.engine === name) const remoteModels = downloadedModels.filter((e) => e.engine === name)
const [isActiveAdvanceSetting, setisActiveAdvanceSetting] = useState(false) const [isActiveAdvanceSetting, setisActiveAdvanceSetting] = useState(false)
@ -149,42 +149,35 @@ const RemoteEngineSettings = ({
</p> </p>
</div> </div>
<div className="w-full"> <div className="w-full">
<Input <div className="relative">
placeholder="Enter API Key" {data?.api_key.length > 0 && (
value={data?.api_key} <div className="absolute right-4 top-1/2 z-10 -translate-y-1/2">
onChange={(e) => handleChange('api_key', e.target.value)} <div
/> className="cursor-pointer"
</div> onClick={() => setShowApiKey(!showApiKey)}
</div> >
</div> {showApiKey ? (
</div> <EyeOff
</div> size={14}
</div> className="text-[hsla(var(--text-seconday))]"
/>
<div className="block w-full px-4"> ) : (
<div className="mb-3 mt-4 border-b border-[hsla(var(--app-border))] pb-4"> <Eye
<div className="flex w-full flex-col items-start justify-between sm:flex-row"> size={14}
<div className="w-full flex-shrink-0 space-y-1.5"> className="text-[hsla(var(--text-seconday))]"
<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"> </div>
Chat Completion URL </div>
</h6> )}
<p className="mt-1 text-[hsla(var(--text-secondary))]"> <Input
Enter your chat completion URL. placeholder="Enter API Key"
</p> type={showApiKey ? 'text' : 'password'}
</div> value={data?.api_key}
<div className="w-full"> className="pr-10"
<Input onChange={(e) => handleChange('api_key', e.target.value)}
placeholder="Enter Chat Completion URL" />
value={data?.metadata.transform_req.chat_completions.url} </div>
onChange={(e) =>
handleChange(
'metadata.transform_req.chat_completions.url',
e.target.value
)
}
/>
</div> </div>
</div> </div>
</div> </div>
@ -255,6 +248,39 @@ const RemoteEngineSettings = ({
{isActiveAdvanceSetting && ( {isActiveAdvanceSetting && (
<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>
</div>
</div>
</div>
</div>
</div>
<div className="block w-full px-4"> <div className="block w-full px-4">
<div className="mb-3 mt-4 border-b border-[hsla(var(--app-border))] pb-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="flex w-full flex-col items-start justify-between sm:flex-row">

3
web/screens/Settings/MyModels/MyModelList/index.tsx
View File

@ -57,8 +57,7 @@ const MyModelList = ({ model }: Props) => {
<h6 <h6
className={twMerge( className={twMerge(
'font-medium lg:line-clamp-1 lg:min-w-[280px] lg:max-w-[280px]', 'font-medium lg:line-clamp-1 lg:min-w-[280px] lg:max-w-[280px]',
!isLocalEngine(engines, model.engine) && !isLocalEngine(engines, model.engine) && 'max-w-none'
'max-w-none text-[hsla(var(--text-secondary))]'
)} )}
title={model.name} title={model.name}
> >