feat: Add Settings Modal for Custom AI Prompts

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 = [];
@@ -27,27 +28,33 @@ const getColor = (type) => {
 };
 
 // 🤖 AI Logic with Domino Effect Thinking (Updated: Using Puter AI API)
+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.`;
+
 const createAIChildren = async (text, parentId, setNodes, setEdges, stopGenerationRef) => {
   try {
     if (stopGenerationRef.current) return;
+
+    const systemPrompt =
+      localStorage.getItem('aiSystemPrompt') || defaultSystemPrompt;
+
     const res = await axios.post(
       'https://api.puter.com/v1/chat/completions',
       {
         model: 'gpt-3.5-turbo',
         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: systemPrompt,
           },
           { role: 'user', content: text }
         ]
@@ -113,6 +120,7 @@ export default function App() {
   const [edges, setEdges] = useState(initialEdges);
   const [prompt, setPrompt] = useState('');
   const [loading, setLoading] = useState(false);
+  const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false);
   const stopGenerationRef = useRef(false);
   const reactFlowWrapper = useRef(null);
 
@@ -168,6 +176,11 @@ export default function App() {
     setLoading(false);
   };
 
+  const handleSaveSettings = (newPrompt) => {
+    localStorage.setItem('aiSystemPrompt', newPrompt);
+    // Optionally, you could provide feedback to the user here
+  };
+
   return (
     <div style={{ height: '100vh', width: '100vw', backgroundColor: '#111', display: 'flex', flexDirection: 'column' }}>
       {/* 🔝 Header */}
@@ -246,6 +259,20 @@ export default function App() {
           >
             Export as PNG
           </button>
+          <button
+            onClick={() => setIsSettingsModalOpen(true)}
+            style={{
+              padding: '10px 20px',
+              backgroundColor: '#6c757d',
+              color: 'white',
+              border: 'none',
+              borderRadius: '8px',
+              fontWeight: 'bold',
+              cursor: 'pointer',
+            }}
+          >
+            Settings
+          </button>
         </div>
       </div>
 
@@ -265,6 +292,12 @@ export default function App() {
           <Background variant="dots" gap={12} size={1} />
         </ReactFlow>
       </div>
+       <SettingsModal
+        isOpen={isSettingsModalOpen}
+        onClose={() => setIsSettingsModalOpen(false)}
+        onSave={handleSaveSettings}
+        defaultPrompt={defaultSystemPrompt}
+      />
     </div>
   );
 }

src/SettingsModal.jsx

@@ -0,0 +1,104 @@
+// 📦 Imports
+import React, { useState } from 'react';
+
+// 🎨 Styles
+const styles = {
+  modalOverlay: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 1000,
+  },
+  modalContent: {
+    backgroundColor: '#333',
+    padding: '2rem',
+    borderRadius: '12px',
+    width: '500px',
+    boxShadow: '0 5px 15px rgba(0, 0, 0, 0.5)',
+    color: '#fff',
+  },
+  textarea: {
+    width: '100%',
+    height: '200px',
+    padding: '10px',
+    borderRadius: '8px',
+    border: '1px solid #555',
+    color: '#fff',
+    backgroundColor: '#444',
+    marginBottom: '1rem',
+    boxSizing: 'border-box',
+  },
+  buttonContainer: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    gap: '0.75rem',
+  },
+  button: {
+    padding: '10px 20px',
+    border: 'none',
+    borderRadius: '8px',
+    fontWeight: 'bold',
+    cursor: 'pointer',
+  },
+  saveButton: {
+    backgroundColor: '#00bcd4',
+    color: 'white',
+  },
+  cancelButton: {
+    backgroundColor: '#555',
+    color: 'white',
+  }
+};
+
+// ⚙️ SettingsModal Component
+const SettingsModal = ({ isOpen, onClose, onSave, defaultPrompt }) => {
+  const [prompt, setPrompt] = useState(
+    localStorage.getItem('aiSystemPrompt') || defaultPrompt || ''
+  );
+
+  const handleSave = () => {
+    onSave(prompt);
+    onClose();
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div style={styles.modalOverlay}>
+      <div style={styles.modalContent}>
+        <h2 style={{ marginTop: 0 }}>Custom AI Prompt</h2>
+        <p style={{ color: '#ccc', marginBottom: '1rem' }}>
+          Define the AI's behavior. This will override the default cause-and-effect analysis prompt.
+        </p>
+        <textarea
+          style={styles.textarea}
+          value={prompt}
+          onChange={(e) => setPrompt(e.target.value)}
+          placeholder="e.g., You are a helpful assistant..."
+        />
+        <div style={styles.buttonContainer}>
+          <button
+            onClick={onClose}
+            style={{ ...styles.button, ...styles.cancelButton }}
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleSave}
+            style={{ ...styles.button, ...styles.saveButton }}
+          >
+            Save
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SettingsModal;