Feature: Custom AI System Prompt

src/App.jsx

@@ -11,6 +11,7 @@ import 'reactflow/dist/style.css';
 import axios from 'axios';
 import html2canvas from 'html2canvas';
 import { saveAs } from 'file-saver';
+import SettingsModal from './SettingsModal';
 
 // 🧠 Initial State & Helpers
 const initialNodes = [];
@@ -26,8 +27,20 @@ const getColor = (type) => {
   }
 };
 
+const defaultSystemPrompt = `You are an expert in cause-and-effect analysis.
+
+Given a news headline or event, break it down into a chain of consequences, like a domino effect.
+
+Each node must:
+- Be short (max 15 words)
+- Represent one specific consequence
+- Be categorized as either: 'positive', 'neutral', or 'negative'
+- Be logically linked to the prompt
+
+Return only 3 outputs: one of each type.`;
+
 // 🤖 AI Logic with Domino Effect Thinking (Updated: Using Puter AI API)
-const createAIChildren = async (text, parentId, setNodes, setEdges, stopGenerationRef) => {
+const createAIChildren = async (text, parentId, setNodes, setEdges, stopGenerationRef, customSystemPrompt) => {
   try {
     if (stopGenerationRef.current) return;
     const res = await axios.post(
@@ -37,17 +50,7 @@ const createAIChildren = async (text, parentId, setNodes, setEdges, stopGenerati
         messages: [
           {
             role: 'system',
-            content: `You are an expert in cause-and-effect analysis.
-
-Given a news headline or event, break it down into a chain of consequences, like a domino effect.
-
-Each node must:
-- Be short (max 15 words)
-- Represent one specific consequence
-- Be categorized as either: 'positive', 'neutral', or 'negative'
-- Be logically linked to the prompt
-
-Return only 3 outputs: one of each type.`
+            content: customSystemPrompt || defaultSystemPrompt,
           },
           { role: 'user', content: text }
         ]
@@ -96,7 +99,7 @@ Return only 3 outputs: one of each type.`
     // Recursively expand each child one level deep
     for (const n of newNodes) {
       if (stopGenerationRef.current) break;
-      await createAIChildren(n.data.label, n.id, setNodes, setEdges, stopGenerationRef);
+      await createAIChildren(n.data.label, n.id, setNodes, setEdges, stopGenerationRef, customSystemPrompt);
     }
 
   } catch (err) {
@@ -113,6 +116,8 @@ export default function App() {
   const [edges, setEdges] = useState(initialEdges);
   const [prompt, setPrompt] = useState('');
   const [loading, setLoading] = useState(false);
+  const [isSettingsModalOpen, setSettingsModalOpen] = useState(false);
+  const [customSystemPrompt, setCustomSystemPrompt] = useState(localStorage.getItem('customSystemPrompt') || '');
   const stopGenerationRef = useRef(false);
   const reactFlowWrapper = useRef(null);
 
@@ -150,7 +155,7 @@ export default function App() {
     setNodes([rootNode]);
     setEdges([]);
 
-    await createAIChildren(prompt, rootId, setNodes, setEdges, stopGenerationRef);
+    await createAIChildren(prompt, rootId, setNodes, setEdges, stopGenerationRef, customSystemPrompt);
 
     setPrompt('');
     setLoading(false);
@@ -164,7 +169,7 @@ export default function App() {
   const onNodeClick = async (_event, node) => {
     stopGenerationRef.current = false;
     setLoading(true);
-    await createAIChildren(node.data.label, node.id, setNodes, setEdges, stopGenerationRef);
+    await createAIChildren(node.data.label, node.id, setNodes, setEdges, stopGenerationRef, customSystemPrompt);
     setLoading(false);
   };
 
@@ -246,9 +251,67 @@ export default function App() {
           >
             Export as PNG
           </button>
+          <button
+            onClick={() => setSettingsModalOpen(true)}
+            style={{
+              padding: '10px 20px',
+              backgroundColor: '#6c757d',
+              color: 'white',
+              border: 'none',
+              borderRadius: '8px',
+              fontWeight: 'bold',
+              cursor: 'pointer',
+            }}
+          >
+            Settings
+          </button>
         </div>
       </div>
 
+      <SettingsModal
+        isOpen={isSettingsModalOpen}
+        onClose={() => setSettingsModalOpen(false)}
+      >
+        <div>
+          <label htmlFor="system-prompt" style={{ display: 'block', marginBottom: '0.5rem' }}>
+            Custom AI System Prompt
+          </label>
+          <textarea
+            id="system-prompt"
+            value={customSystemPrompt}
+            onChange={(e) => setCustomSystemPrompt(e.target.value)}
+            style={{
+              width: '100%',
+              minHeight: '150px',
+              borderRadius: '8px',
+              border: '1px solid #555',
+              color: '#fff',
+              backgroundColor: '#222',
+              padding: '10px',
+              fontSize: '14px',
+              marginBottom: '1rem',
+            }}
+          />
+          <button
+            onClick={() => {
+              localStorage.setItem('customSystemPrompt', customSystemPrompt);
+              setSettingsModalOpen(false);
+            }}
+            style={{
+              padding: '10px 20px',
+              backgroundColor: '#00bcd4',
+              color: 'white',
+              border: 'none',
+              borderRadius: '8px',
+              fontWeight: 'bold',
+              cursor: 'pointer',
+            }}
+          >
+            Save and Close
+          </button>
+        </div>
+      </SettingsModal>
+
       {/* 🧠 ReactFlow Canvas */}
       <div style={{ flexGrow: 1 }} ref={reactFlowWrapper}>
         <ReactFlow

src/SettingsModal.jsx

@@ -0,0 +1,64 @@
+// 📦 Imports
+import React from 'react';
+
+// 🎨 Styles
+const modalOverlayStyle = {
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  backgroundColor: 'rgba(0, 0, 0, 0.7)',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  zIndex: 1000,
+};
+
+const modalContentStyle = {
+  backgroundColor: '#333',
+  padding: '2rem',
+  borderRadius: '12px',
+  color: '#fff',
+  width: 'clamp(300px, 80vw, 600px)',
+  boxShadow: '0 5px 15px rgba(0, 0, 0, 0.5)',
+  border: '1px solid #555',
+};
+
+const modalHeaderStyle = {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  marginBottom: '1.5rem',
+  borderBottom: '1px solid #555',
+  paddingBottom: '1rem',
+};
+
+const closeButtonStyle = {
+  background: 'transparent',
+  border: 'none',
+  color: '#fff',
+  fontSize: '1.5rem',
+  cursor: 'pointer',
+};
+
+// ⚙️ Component
+const SettingsModal = ({ isOpen, onClose, children }) => {
+  if (!isOpen) return null;
+
+  return (
+    <div style={modalOverlayStyle} onClick={onClose}>
+      <div style={modalContentStyle} onClick={(e) => e.stopPropagation()}>
+        <div style={modalHeaderStyle}>
+          <h2 style={{ margin: 0 }}>Settings</h2>
+          <button style={closeButtonStyle} onClick={onClose}>
+            &times;
+          </button>
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default SettingsModal;