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

feat: allow see apikey when server local status running

Browse Source
This commit is contained in:
Faisal Amir 2025-09-03 17:55:52 +07:00
parent 08e756f27b
commit cb4641e4ad
6 changed files with 70 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
web-app/src/containers/ApiKeyInput.tsx
View File

@ -3,15 +3,18 @@ import { useLocalApiServer } from '@/hooks/useLocalApiServer'
import { useState, useEffect, useCallback } from 'react'
import { Eye, EyeOff } from 'lucide-react'
import { useTranslation } from '@/i18n/react-i18next-compat'
import { cn } from '@/lib/utils'
interface ApiKeyInputProps {
showError?: boolean
onValidationChange?: (isValid: boolean) => void
isServerRunning?: boolean
}
export function ApiKeyInput({
showError = false,
onValidationChange,
isServerRunning,
}: ApiKeyInputProps) {
const { apiKey, setApiKey } = useLocalApiServer()
const [inputValue, setInputValue] = useState(apiKey.toString())
@ -19,16 +22,19 @@ export function ApiKeyInput({
const [error, setError] = useState('')
const { t } = useTranslation()
const validateApiKey = useCallback((value: string) => {
if (!value || value.trim().length === 0) {
setError(t('common:apiKeyRequired'))
onValidationChange?.(false)
return false
}
setError('')
onValidationChange?.(true)
return true
}, [onValidationChange, t])
const validateApiKey = useCallback(
(value: string) => {
if (!value || value.trim().length === 0) {
setError(t('common:apiKeyRequired'))
onValidationChange?.(false)
return false
}
setError('')
onValidationChange?.(true)
return true
},
[onValidationChange, t]
)
useEffect(() => {
if (showError) {
@ -64,11 +70,12 @@ export function ApiKeyInput({
value={inputValue}
onChange={handleChange}
onBlur={handleBlur}
className={`w-full text-sm pr-10 ${
hasError
? 'border-1 border-destructive focus:border-destructive focus:ring-destructive'
: ''
}`}
className={cn(
'w-full text-sm pr-10',
hasError &&
'border-1 border-destructive focus:border-destructive focus:ring-destructive',
isServerRunning && 'opacity-50 pointer-events-none'
)}
placeholder={t('common:enterApiKey')}
/>
<div className="absolute right-2 top-1/2 transform -translate-y-1/2 flex items-center gap-1">

12
web-app/src/containers/ApiPrefixInput.tsx
View File

@ -1,8 +1,13 @@
import { Input } from '@/components/ui/input'
import { useLocalApiServer } from '@/hooks/useLocalApiServer'
import { cn } from '@/lib/utils'
import { useState } from 'react'
export function ApiPrefixInput() {
export function ApiPrefixInput({
isServerRunning,
}: {
isServerRunning?: boolean
}) {
const { apiPrefix, setApiPrefix } = useLocalApiServer()
const [inputValue, setInputValue] = useState(apiPrefix)
@ -27,7 +32,10 @@ export function ApiPrefixInput() {
value={inputValue}
onChange={handleChange}
onBlur={handleBlur}
className="w-24 h-8 text-sm"
className={cn(
'w-24 h-8 text-sm',
isServerRunning && 'opacity-50 pointer-events-none'
)}
placeholder="/v1"
/>
)

8
web-app/src/containers/PortInput.tsx
View File

@ -1,8 +1,9 @@
import { Input } from '@/components/ui/input'
import { useLocalApiServer } from '@/hooks/useLocalApiServer'
import { cn } from '@/lib/utils'
import { useState } from 'react'
export function PortInput() {
export function PortInput({ isServerRunning }: { isServerRunning?: boolean }) {
const { serverPort, setServerPort } = useLocalApiServer()
const [inputValue, setInputValue] = useState(serverPort.toString())
@ -29,7 +30,10 @@ export function PortInput() {
value={inputValue}
onChange={handleChange}
onBlur={handleBlur}
className="w-24 h-8 text-sm"
className={cn(
'w-24 h-8 text-sm',
isServerRunning && 'opacity-50 pointer-events-none'
)}
/>
)
}

12
web-app/src/containers/ServerHostSwitcher.tsx
View File

@ -4,6 +4,7 @@ import {
DropdownMenuItem,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { useLocalApiServer } from '@/hooks/useLocalApiServer'
import { cn } from '@/lib/utils'
@ -12,12 +13,19 @@ const hostOptions = [
{ value: '0.0.0.0', label: '0.0.0.0' },
]
export function ServerHostSwitcher() {
export function ServerHostSwitcher({
isServerRunning,
}: {
isServerRunning?: boolean
}) {
const { serverHost, setServerHost } = useLocalApiServer()
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<DropdownMenuTrigger
asChild
className={cn(isServerRunning && 'opacity-50 pointer-events-none')}
>
<span
title="Edit Server Host"
className="flex cursor-pointer items-center gap-1 px-2 py-1 rounded-sm bg-main-view-fg/15 text-sm outline-none text-main-view-fg font-medium"

12
web-app/src/containers/TrustedHostsInput.tsx
View File

@ -2,8 +2,13 @@ import { Input } from '@/components/ui/input'
import { useLocalApiServer } from '@/hooks/useLocalApiServer'
import { useState, useEffect } from 'react'
import { useTranslation } from '@/i18n/react-i18next-compat'
import { cn } from '@/lib/utils'
export function TrustedHostsInput() {
export function TrustedHostsInput({
isServerRunning,
}: {
isServerRunning?: boolean
}) {
const { trustedHosts, setTrustedHosts } = useLocalApiServer()
const [inputValue, setInputValue] = useState(trustedHosts.join(', '))
const { t } = useTranslation()
@ -38,8 +43,11 @@ export function TrustedHostsInput() {
value={inputValue}
onChange={handleChange}
onBlur={handleBlur}
className="w-full h-8 text-sm"
placeholder={t('common:enterTrustedHosts')}
className={cn(
'w-24 h-8 text-sm',
isServerRunning && 'opacity-50 pointer-events-none'
)}
/>
)
}

29
web-app/src/routes/settings/local-api-server.tsx
View File

@ -45,7 +45,8 @@ function LocalAPIServer() {
} = useLocalApiServer()
const { serverStatus, setServerStatus } = useAppState()
const { selectedModel, selectedProvider, getProviderByName } = useModelProvider()
const { selectedModel, selectedProvider, getProviderByName } =
useModelProvider()
const [showApiKeyError, setShowApiKeyError] = useState(false)
const [isApiKeyEmpty, setIsApiKeyEmpty] = useState(
!apiKey || apiKey.toString().trim().length === 0
@ -293,38 +294,31 @@ function LocalAPIServer() {
<CardItem
title={t('settings:localApiServer.serverHost')}
description={t('settings:localApiServer.serverHostDesc')}
className={cn(
isServerRunning && 'opacity-50 pointer-events-none'
)}
actions={<ServerHostSwitcher />}
actions={
<ServerHostSwitcher isServerRunning={isServerRunning} />
}
/>
<CardItem
title={t('settings:localApiServer.serverPort')}
description={t('settings:localApiServer.serverPortDesc')}
className={cn(
isServerRunning && 'opacity-50 pointer-events-none'
)}
actions={<PortInput />}
actions={<PortInput isServerRunning={isServerRunning} />}
/>
<CardItem
title={t('settings:localApiServer.apiPrefix')}
description={t('settings:localApiServer.apiPrefixDesc')}
className={cn(
isServerRunning && 'opacity-50 pointer-events-none'
)}
actions={<ApiPrefixInput />}
actions={<ApiPrefixInput isServerRunning={isServerRunning} />}
/>
<CardItem
title={t('settings:localApiServer.apiKey')}
description={t('settings:localApiServer.apiKeyDesc')}
className={cn(
'flex-col sm:flex-row items-start sm:items-center sm:justify-between gap-y-2',
isServerRunning && 'opacity-50 pointer-events-none',
isApiKeyEmpty && showApiKeyError && 'pb-6'
)}
classNameWrapperAction="w-full sm:w-auto"
actions={
<ApiKeyInput
isServerRunning={isServerRunning}
showError={showApiKeyError}
onValidationChange={handleApiKeyValidation}
/>
@ -334,11 +328,12 @@ function LocalAPIServer() {
title={t('settings:localApiServer.trustedHosts')}
description={t('settings:localApiServer.trustedHostsDesc')}
className={cn(
'flex-col sm:flex-row items-start sm:items-center sm:justify-between gap-y-2',
isServerRunning && 'opacity-50 pointer-events-none'
'flex-col sm:flex-row items-start sm:items-center sm:justify-between gap-y-2'
)}
classNameWrapperAction="w-full sm:w-auto"
actions={<TrustedHostsInput />}
actions={
<TrustedHostsInput isServerRunning={isServerRunning} />
}
/>
</Card>