From edcce94e9a0b295c01be5b55060df351f238a8da Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 10 Jan 2026 03:59:18 +0000
Subject: [PATCH] feat: Allow user to customize AI system prompt

Adds a new "Settings" button and a corresponding modal.
The modal contains a textarea where the user can edit the system prompt for the AI.
The custom prompt is saved to localStorage and loaded on app start.
The AI generation calls now use the custom prompt if it exists, otherwise they fall back to the default prompt.
---
 src/App.jsx           | 66 +++++++++++++++++++++++-------
 src/SettingsModal.jsx | 93 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 144 insertions(+), 15 deletions(-)
 create mode 100644 src/SettingsModal.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 5f3df15..1652ba9 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,5 +1,6 @@
 // 📦 Imports
 import React, { useState, useRef } from 'react';
+import SettingsModal from './SettingsModal';
 import ReactFlow, {
   Background,
   Controls,
@@ -17,6 +18,18 @@ const initialNodes = [];
 const initialEdges = [];
 let nodeId = 1;
 
+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 getColor = (type) => {
   switch (type) {
     case 'positive': return '#00c853';
@@ -27,7 +40,7 @@ const getColor = (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, systemPrompt) => {
   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: systemPrompt,
           },
           { 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, systemPrompt);
     }
 
   } catch (err) {
@@ -113,9 +116,20 @@ export default function App() {
   const [edges, setEdges] = useState(initialEdges);
   const [prompt, setPrompt] = useState('');
   const [loading, setLoading] = useState(false);
+  const [isSettingsOpen, setSettingsOpen] = useState(false);
+  const [systemPrompt, setSystemPrompt] = useState(
+    localStorage.getItem('customSystemPrompt') || defaultSystemPrompt
+  );
   const stopGenerationRef = useRef(false);
   const reactFlowWrapper = useRef(null);
 
+  const toggleSettingsModal = () => setSettingsOpen(!isSettingsOpen);
+
+  const handleSavePrompt = () => {
+    localStorage.setItem('customSystemPrompt', systemPrompt);
+    toggleSettingsModal();
+  };
+
   const handleExport = () => {
     if (reactFlowWrapper.current) {
       html2canvas(reactFlowWrapper.current).then((canvas) => {
@@ -150,7 +164,7 @@ export default function App() {
     setNodes([rootNode]);
     setEdges([]);
 
-    await createAIChildren(prompt, rootId, setNodes, setEdges, stopGenerationRef);
+    await createAIChildren(prompt, rootId, setNodes, setEdges, stopGenerationRef, systemPrompt);
 
     setPrompt('');
     setLoading(false);
@@ -164,7 +178,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, systemPrompt);
     setLoading(false);
   };
 
@@ -246,9 +260,31 @@ export default function App() {
           >
             Export as PNG
           </button>
+          <button
+            onClick={toggleSettingsModal}
+            style={{
+              padding: '10px 20px',
+              backgroundColor: '#6c757d',
+              color: 'white',
+              border: 'none',
+              borderRadius: '8px',
+              fontWeight: 'bold',
+              cursor: 'pointer',
+            }}
+          >
+            Settings
+          </button>
         </div>
       </div>
 
+      <SettingsModal
+        isOpen={isSettingsOpen}
+        onClose={toggleSettingsModal}
+        systemPrompt={systemPrompt}
+        setSystemPrompt={setSystemPrompt}
+        onSave={handleSavePrompt}
+      />
+
       {/* 🧠 ReactFlow Canvas */}
       <div style={{ flexGrow: 1 }} ref={reactFlowWrapper}>
         <ReactFlow
diff --git a/src/SettingsModal.jsx b/src/SettingsModal.jsx
new file mode 100644
index 0000000..6918b42
--- /dev/null
+++ b/src/SettingsModal.jsx
@@ -0,0 +1,93 @@
+// 📦 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: '#2d2d2d',
+  padding: '2rem',
+  borderRadius: '12px',
+  width: 'clamp(300px, 80vw, 600px)',
+  boxShadow: '0 5px 15px rgba(0, 0, 0, 0.5)',
+  color: '#fff',
+  border: '1px solid #444',
+};
+
+const textareaStyle = {
+  width: '100%',
+  height: '200px',
+  padding: '10px',
+  borderRadius: '8px',
+  border: '1px solid #555',
+  color: '#fff',
+  backgroundColor: '#333',
+  fontSize: '1rem',
+  resize: 'vertical',
+  marginBottom: '1rem',
+};
+
+const buttonStyle = {
+  padding: '10px 20px',
+  border: 'none',
+  borderRadius: '8px',
+  fontWeight: 'bold',
+  cursor: 'pointer',
+};
+
+const saveButtonStyle = {
+  ...buttonStyle,
+  backgroundColor: '#00bcd4',
+  color: 'white',
+  marginRight: '1rem',
+};
+
+const closeButtonStyle = {
+  ...buttonStyle,
+  backgroundColor: '#ff4d4d',
+  color: 'white',
+};
+
+// ⚙️ Component
+const SettingsModal = ({ isOpen, onClose, systemPrompt, setSystemPrompt, onSave }) => {
+  if (!isOpen) return null;
+
+  return (
+    <div style={modalOverlayStyle} onClick={onClose}>
+      <div style={modalContentStyle} onClick={(e) => e.stopPropagation()}>
+        <h2 style={{ marginTop: 0, marginBottom: '1.5rem', borderBottom: '1px solid #444', paddingBottom: '1rem' }}>
+          Custom AI Prompt
+        </h2>
+        <p style={{ marginBottom: '1rem', color: '#ccc' }}>
+          Tweak the AI's instructions to generate different kinds of mind maps.
+        </p>
+        <textarea
+          style={textareaStyle}
+          value={systemPrompt}
+          onChange={(e) => setSystemPrompt(e.target.value)}
+        />
+        <div>
+          <button style={saveButtonStyle} onClick={onSave}>
+            Save
+          </button>
+          <button style={closeButtonStyle} onClick={onClose}>
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SettingsModal;