Function SystemPromptTab

SettingsModal.tsx:282–442

()

// ── System Prompt Settings Tab ────────────────────────────────────────────

function SystemPromptTab() {
  const {
    customSystemPrompt,
    useCustomSystemPrompt,
    setCustomSystemPrompt,
    setUseCustomSystemPrompt,
    resetSystemPromptToDefault
  } = useStore()

  const [localPrompt, setLocalPrompt] = useState(customSystemPrompt)
  const [saved, setSaved] = useState(false)
  const [showResetConfirm, setShowResetConfirm] = useState(false)

  // Sync local state when store changes
  useEffect(() => {
    setLocalPrompt(customSystemPrompt)
  }, [customSystemPrompt])

  const handleSave = () => {
    setCustomSystemPrompt(localPrompt)
    setSaved(true)
    setTimeout(() => setSaved(false), 2000)
  }

  const handleReset = () => {
    resetSystemPromptToDefault()
    setLocalPrompt(DEFAULT_GODMODE_PROMPT)
    setShowResetConfirm(false)
    setSaved(true)
    setTimeout(() => setSaved(false), 2000)
  }

  const handleCopy = () => {
    navigator.clipboard.writeText(localPrompt)
  }

  const charCount = localPrompt.length
  const isModified = localPrompt !== customSystemPrompt

  return (
    <div className="space-y-4">
      <div>
        <h3 className="text-lg font-semibold mb-1">GODMODE System Prompt</h3>
        <p className="text-sm theme-secondary mb-4">
          The system prompt injected into every conversation. This is your &quot;Ultraplinian&quot; jailbreak prompt.
        </p>
      </div>

      {/* Master toggle */}
      <ToggleSetting
        label="Use Custom System Prompt"
        description="When enabled, this prompt is sent as the system message to all models"
        enabled={useCustomSystemPrompt}
        onChange={setUseCustomSystemPrompt}
      />

      {useCustomSystemPrompt && (
        <>