mirror of
https://github.com/MacRimi/ProxMenux.git
synced 2026-04-29 22:45:57 +00:00
Update notification-settings.tsx
This commit is contained in:
@@ -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>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user