Update notification-settings.tsx

This commit is contained in:
MacRimi
2026-03-21 20:55:34 +01:00
parent 6534fa7171
commit 642539cdfc
+51 -47
View File
@@ -1698,60 +1698,61 @@ export function NotificationSettings() {
)} )}
</div> </div>
{/* Language selector */} {/* Prompt Mode section */}
<div className="space-y-2"> <div className="space-y-2">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Globe className="h-4 w-4 text-green-400" /> <MessageSquareText className="h-4 w-4 text-amber-400" />
<Label className="text-xs sm:text-sm text-foreground/80">Language</Label> <Label className="text-xs sm:text-sm text-foreground/80">Prompt Mode</Label>
</div> </div>
<Select <Select
value={config.ai_language || "en"} value={config.ai_prompt_mode || "default"}
onValueChange={v => updateConfig(p => ({ ...p, ai_language: v }))} onValueChange={v => {
updateConfig(p => ({ ...p, ai_prompt_mode: v }))
// Show info modal when switching to custom for the first time
if (v === "custom" && !config.ai_custom_prompt) {
setShowCustomPromptInfo(true)
}
}}
disabled={!editMode} disabled={!editMode}
> >
<SelectTrigger className="h-9 text-sm"> <SelectTrigger className="h-9 text-sm">
<SelectValue placeholder="Select language"> <SelectValue />
{AI_LANGUAGES.find(l => l.value === (config.ai_language || "en"))?.label || "English"}
</SelectValue>
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{AI_LANGUAGES.map(l => ( <SelectItem value="default">Default Prompt</SelectItem>
<SelectItem key={l.value} value={l.value}>{l.label}</SelectItem> <SelectItem value="custom">Custom Prompt</SelectItem>
))}
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
{/* Prompt Mode section */} {/* Default mode options: Language and Detail Level per Channel */}
<div className="space-y-3 pt-3 border-t border-border/50"> {(config.ai_prompt_mode || "default") === "default" && (
<div className="space-y-2"> <div className="space-y-3 pt-3 border-t border-border/50">
<div className="flex items-center gap-2"> {/* Language selector - only for default mode */}
<MessageSquareText className="h-4 w-4 text-amber-400" /> <div className="space-y-2">
<Label className="text-xs sm:text-sm text-foreground/80">Prompt Mode</Label> <div className="flex items-center gap-2">
<Globe className="h-4 w-4 text-green-400" />
<Label className="text-xs sm:text-sm text-foreground/80">Language</Label>
</div>
<Select
value={config.ai_language || "en"}
onValueChange={v => updateConfig(p => ({ ...p, ai_language: v }))}
disabled={!editMode}
>
<SelectTrigger className="h-9 text-sm">
<SelectValue placeholder="Select language">
{AI_LANGUAGES.find(l => l.value === (config.ai_language || "en"))?.label || "English"}
</SelectValue>
</SelectTrigger>
<SelectContent>
{AI_LANGUAGES.map(l => (
<SelectItem key={l.value} value={l.value}>{l.label}</SelectItem>
))}
</SelectContent>
</Select>
</div> </div>
<Select
value={config.ai_prompt_mode || "default"}
onValueChange={v => {
updateConfig(p => ({ ...p, ai_prompt_mode: v }))
// Show info modal when switching to custom for the first time
if (v === "custom" && !config.ai_custom_prompt) {
setShowCustomPromptInfo(true)
}
}}
disabled={!editMode}
>
<SelectTrigger className="h-9 text-sm">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="default">Default Prompt</SelectItem>
<SelectItem value="custom">Custom Prompt</SelectItem>
</SelectContent>
</Select>
</div>
{/* Default mode: Detail Level per Channel */} {/* Detail Level per Channel */}
{(config.ai_prompt_mode || "default") === "default" && (
<div className="space-y-3"> <div className="space-y-3">
<Label className="text-xs sm:text-sm text-foreground/80">Detail Level per Channel</Label> <Label className="text-xs sm:text-sm text-foreground/80">Detail Level per Channel</Label>
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
@@ -1786,12 +1787,12 @@ export function NotificationSettings() {
AI translates and formats notifications to your selected language. Each channel can have different detail levels. AI translates and formats notifications to your selected language. Each channel can have different detail levels.
</p> </p>
</div> </div>
</div> </div>
)} )}
{/* Custom mode: Editable prompt textarea */} {/* Custom mode: Editable prompt textarea */}
{config.ai_prompt_mode === "custom" && ( {config.ai_prompt_mode === "custom" && (
<div className="space-y-3"> <div className="space-y-3 pt-3 border-t border-border/50">
<div className="space-y-2"> <div className="space-y-2">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Label className="text-xs sm:text-sm text-foreground/80">Custom Prompt</Label> <Label className="text-xs sm:text-sm text-foreground/80">Custom Prompt</Label>
@@ -1895,10 +1896,9 @@ export function NotificationSettings() {
<p className="text-xs sm:text-sm text-purple-400/90 leading-relaxed"> <p className="text-xs sm:text-sm text-purple-400/90 leading-relaxed">
Define your own prompt rules and format. You control the detail level and style of all notifications. Export to share with others or import prompts from the community. Define your own prompt rules and format. You control the detail level and style of all notifications. Export to share with others or import prompts from the community.
</p> </p>
</div>
</div> </div>
)} </div>
</div> )}
{/* Test Connection button - moved to end */} {/* Test Connection button - moved to end */}
<div className="space-y-3 pt-3 border-t border-border/50"> <div className="space-y-3 pt-3 border-t border-border/50">
@@ -2136,6 +2136,10 @@ export function NotificationSettings() {
<span className="text-purple-400 mt-0.5">3.</span> <span className="text-purple-400 mt-0.5">3.</span>
<span>The prompt receives raw Proxmox event data as input</span> <span>The prompt receives raw Proxmox event data as input</span>
</li> </li>
<li className="flex items-start gap-2">
<span className="text-purple-400 mt-0.5">4.</span>
<span>Define the output language in your prompt (the Language selector only applies to Default mode)</span>
</li>
</ul> </ul>
</div> </div>