projectmoon
/
perplexica
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(settings-dialog): enhance UI

This commit is contained in:
ItzCrazyKns 2024-04-23 17:06:44 +05:30
parent 7653eaf146
commit 6fe70a70ff
No known key found for this signature in database
GPG Key ID: 8162927C7CCE3065
1 changed files with 37 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
ui/components/SettingsDialog.tsx
View File

@ -93,10 +93,12 @@ const SettingsDialog = ({
Settings Settings
</Dialog.Title> </Dialog.Title>
{config && !isLoading && ( {config && !isLoading && (
<div className="flex flex-col space-y-4 mt-6"> <div className="flex flex-col space-y-4 mt-6 max-h-[200px] overflow-auto pr-2">
{config.providers && ( {config.providers && (
<div className="flex flex-col space-y-1"> <div className="flex flex-col space-y-1">
<p className="text-white/70 text-sm">LLM Provider</p> <p className="text-white/70 text-sm">
Chat model Provider
</p>
<select <select
onChange={(e) => onChange={(e) =>
setConfig({ setConfig({
@ -156,44 +158,42 @@ const SettingsDialog = ({
) )
) : ( ) : (
<option value="" disabled selected> <option value="" disabled selected>
Invalid provider Invalid provider, please check backend logs
</option> </option>
)} )}
</select> </select>
</div> </div>
)} )}
{config.selectedProvider === 'openai' && ( <div className="flex flex-col space-y-1">
<div className="flex flex-col space-y-1"> <p className="text-white/70 text-sm">OpenAI API Key</p>
<p className="text-white/70 text-sm">OpenAI API Key</p> <input
<input type="text"
type="text" placeholder='OpenAI API Key'
defaultValue={config.openeaiApiKey} defaultValue={config.openeaiApiKey}
onChange={(e) => onChange={(e) =>
setConfig({ setConfig({
...config, ...config,
openeaiApiKey: e.target.value, openeaiApiKey: e.target.value,
}) })
} }
className="bg-[#111111] px-3 py-2 flex items-center overflow-hidden border border-[#1C1C1C] text-white rounded-lg text-sm" className="bg-[#111111] px-3 py-2 flex items-center overflow-hidden border border-[#1C1C1C] text-white rounded-lg text-sm"
/> />
</div> </div>
)} <div className="flex flex-col space-y-1">
{config.selectedProvider === 'ollama' && ( <p className="text-white/70 text-sm">Ollama API URL</p>
<div className="flex flex-col space-y-1"> <input
<p className="text-white/70 text-sm">Ollama API URL</p> type="text"
<input placeholder='Ollama API URL'
type="text" defaultValue={config.ollamaApiUrl}
defaultValue={config.ollamaApiUrl} onChange={(e) =>
onChange={(e) => setConfig({
setConfig({ ...config,
...config, ollamaApiUrl: e.target.value,
ollamaApiUrl: e.target.value, })
}) }
} className="bg-[#111111] px-3 py-2 flex items-center overflow-hidden border border-[#1C1C1C] text-white rounded-lg text-sm"
className="bg-[#111111] px-3 py-2 flex items-center overflow-hidden border border-[#1C1C1C] text-white rounded-lg text-sm" />
/> </div>
</div>
)}
</div> </div>
)} )}
{isLoading && ( {isLoading && (
@ -211,9 +211,9 @@ const SettingsDialog = ({
disabled={isLoading || isUpdating} disabled={isLoading || isUpdating}
> >
{isUpdating ? ( {isUpdating ? (
<RefreshCw className="animate-spin" /> <RefreshCw size={20} className="animate-spin" />
) : ( ) : (
<CloudUpload /> <CloudUpload size={20} />
)} )}
</button> </button>
</div> </div>