54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
import React, { useEffect, useState } from 'react'
|
|
|
|
import { InferenceEngine } from '@janhq/core'
|
|
import { Input } from '@janhq/uikit'
|
|
|
|
import { useAtomValue } from 'jotai'
|
|
|
|
import { useEngineSettings } from '@/hooks/useEngineSettings'
|
|
|
|
import { selectedModelAtom } from '../DropdownListSidebar'
|
|
|
|
import { serverEnabledAtom } from '@/helpers/atoms/LocalServer.atom'
|
|
|
|
const OpenAiKeyInput: React.FC = () => {
|
|
const selectedModel = useAtomValue(selectedModelAtom)
|
|
const serverEnabled = useAtomValue(serverEnabledAtom)
|
|
const [openAISettings, setOpenAISettings] = useState<
|
|
{ api_key: string } | undefined
|
|
>(undefined)
|
|
const { readOpenAISettings, saveOpenAISettings } = useEngineSettings()
|
|
|
|
useEffect(() => {
|
|
readOpenAISettings().then((settings) => {
|
|
setOpenAISettings(settings)
|
|
})
|
|
}, [readOpenAISettings])
|
|
|
|
if (!selectedModel || selectedModel.engine !== InferenceEngine.openai) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div className="mt-4">
|
|
<label
|
|
id="thread-title"
|
|
className="mb-2 inline-block font-bold text-gray-600 dark:text-gray-300"
|
|
>
|
|
API Key
|
|
</label>
|
|
<Input
|
|
disabled={serverEnabled}
|
|
id="assistant-instructions"
|
|
placeholder="Enter your API_KEY"
|
|
defaultValue={openAISettings?.api_key}
|
|
onChange={(e) => {
|
|
saveOpenAISettings({ apiKey: e.target.value })
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default OpenAiKeyInput
|