feat(ui): add Ollama logo and make API key optional

- Add Ollama SVG logo to ui/public/icons/
- Add icon property to both ollama and ollama-cloud presets
- Make API key field optional for local Ollama (show input with hint)
- Update placeholder: "Optional - only if auth is enabled"
- Allows power users with Ollama auth configured to provide key
This commit is contained in:
kaitranntt
2026-01-22 14:24:37 -05:00
parent 2b7d18c4c6
commit 2cb77f2dfd
3 changed files with 49 additions and 45 deletions
@@ -215,8 +215,8 @@ export function ProfileCreateDialog({
// Use user-provided baseUrl (allows customization of preset URLs)
const finalData = {
...data,
// For presets that don't require API key, use empty string
apiKey: currentPreset?.requiresApiKey === false ? '' : data.apiKey,
// Use provided API key, or empty string if not provided (for optional auth providers)
apiKey: data.apiKey || '',
};
try {
await createMutation.mutateAsync(finalData);
@@ -374,51 +374,52 @@ export function ProfileCreateDialog({
)}
</div>
{/* API Key - hidden for presets that don't require it */}
{currentPreset?.requiresApiKey !== false ? (
<div className="space-y-1.5">
<Label htmlFor="apiKey">
API Key <span className="text-destructive">*</span>
</Label>
<div className="relative">
<Input
id="apiKey"
type={showApiKey ? 'text' : 'password'}
{...register('apiKey')}
placeholder={currentPreset?.apiKeyPlaceholder ?? 'sk-...'}
className="pr-10"
/>
<Button
type="button"
variant="ghost"
size="icon"
className="absolute right-0 top-0 h-9 w-9 text-muted-foreground hover:text-foreground"
onClick={() => setShowApiKey(!showApiKey)}
tabIndex={-1}
>
{showApiKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
</Button>
</div>
{errors.apiKey ? (
<p className="text-xs text-destructive">{errors.apiKey.message}</p>
) : (
currentPreset?.apiKeyHint && (
<p className="text-xs text-muted-foreground">{currentPreset.apiKeyHint}</p>
)
{/* API Key - optional for presets that don't require it */}
<div className="space-y-1.5">
<Label htmlFor="apiKey">
API Key{' '}
{currentPreset?.requiresApiKey !== false && (
<span className="text-destructive">*</span>
)}
{currentPreset?.requiresApiKey === false && (
<span className="text-muted-foreground text-xs font-normal">(optional)</span>
)}
</Label>
<div className="relative">
<Input
id="apiKey"
type={showApiKey ? 'text' : 'password'}
{...register('apiKey')}
placeholder={
currentPreset?.requiresApiKey === false
? 'Optional - only if auth is enabled'
: (currentPreset?.apiKeyPlaceholder ?? 'sk-...')
}
className="pr-10"
/>
<Button
type="button"
variant="ghost"
size="icon"
className="absolute right-0 top-0 h-9 w-9 text-muted-foreground hover:text-foreground"
onClick={() => setShowApiKey(!showApiKey)}
tabIndex={-1}
>
{showApiKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
</Button>
</div>
) : (
<div className="flex items-start gap-3 p-3 bg-green-50 dark:bg-green-950/20 text-green-800 dark:text-green-300 rounded-md text-sm border border-green-100 dark:border-green-900/30">
<Info className="w-5 h-5 shrink-0 mt-0.5" />
<div>
<p className="font-medium">No API Key Required</p>
<p className="text-xs opacity-90">
{currentPreset?.apiKeyHint ||
'This provider runs locally and does not require authentication.'}
</p>
</div>
</div>
)}
{errors.apiKey ? (
<p className="text-xs text-destructive">{errors.apiKey.message}</p>
) : currentPreset?.requiresApiKey === false ? (
<p className="text-xs text-muted-foreground">
Only needed if you have configured Ollama authentication
</p>
) : (
currentPreset?.apiKeyHint && (
<p className="text-xs text-muted-foreground">{currentPreset.apiKeyHint}</p>
)
)}
</div>
</TabsContent>
<TabsContent value="models" className="p-6 mt-0 space-y-4">