diff --git a/app/components/@settings/tabs/features/FeaturesTab.tsx b/app/components/@settings/tabs/features/FeaturesTab.tsx index 3b14a7565d..11430be004 100644 --- a/app/components/@settings/tabs/features/FeaturesTab.tsx +++ b/app/components/@settings/tabs/features/FeaturesTab.tsx @@ -1,5 +1,5 @@ // Remove unused imports -import React, { memo, useCallback } from 'react'; +import React, { memo, useCallback, useState, useEffect } from 'react'; import { motion } from 'framer-motion'; import { Switch } from '~/components/ui/Switch'; import { useSettings } from '~/lib/hooks/useSettings'; @@ -119,6 +119,29 @@ export default function FeaturesTab() { promptId, } = useSettings(); + // State for custom prompt text + const [customPromptText, setCustomPromptText] = useState(''); + const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false); + + // Load custom prompt from localStorage on component mount + useEffect(() => { + setCustomPromptText(PromptLibrary.getCustomPrompt()); + setHasUnsavedChanges(false); + }, []); + + // Handle custom prompt change + const handleCustomPromptChange = (e: React.ChangeEvent) => { + setCustomPromptText(e.target.value); + setHasUnsavedChanges(true); + }; + + // Save custom prompt + const handleSaveCustomPrompt = () => { + PromptLibrary.saveCustomPrompt(customPromptText); + toast.success('Custom prompt saved'); + setHasUnsavedChanges(false); + }; + // Enable features by default on first load React.useEffect(() => { // Only set defaults if values are undefined @@ -143,6 +166,13 @@ export default function FeaturesTab() { } }, []); // Only run once on component mount + // Add this effect to check if the user has selected the custom prompt option but hasn't saved a custom prompt yet + useEffect(() => { + if (promptId === 'custom' && !PromptLibrary.hasCustomPrompt() && !customPromptText) { + toast.warning('Please create and save a custom prompt to use this option'); + } + }, [promptId, customPromptText]); + const handleToggleFeature = useCallback( (id: string, enabled: boolean) => { switch (id) { @@ -177,6 +207,18 @@ export default function FeaturesTab() { [enableLatestBranch, setAutoSelectTemplate, enableContextOptimization, setEventLogs], ); + // Update the select onChange handler to warn if selecting custom without a saved prompt + const handlePromptIdChange = (e: React.ChangeEvent) => { + const newPromptId = e.target.value; + + if (newPromptId === 'custom' && !PromptLibrary.hasCustomPrompt()) { + toast.info('Please create and save a custom prompt'); + } + + setPromptId(newPromptId); + toast.success('Prompt template updated'); + }; + const features = { stable: [ { @@ -269,10 +311,7 @@ export default function FeaturesTab() { + + {/* Custom Prompt Text Area */} + {promptId === 'custom' && ( + +