From 0f3e3324e423bd67a9ca2de6b651a7731d2538f8 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 9 Jan 2026 03:57:29 +0000
Subject: [PATCH] feat: Add Settings Modal for Custom AI Prompts

This change introduces a new "Settings" modal that allows users to customize the AI's system prompt.

The new `SettingsModal` component provides a user interface for editing and saving a custom system prompt. The prompt is stored in `localStorage` to persist between sessions.

The `createAIChildren` function has been updated to use the custom prompt if it exists, otherwise it falls back to the default prompt. This ensures that the application's core functionality remains unchanged for users who do not use this new feature.
---
 src/App.jsx           |  55 +++++++++++++++++-----
 src/SettingsModal.jsx | 104 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 148 insertions(+), 11 deletions(-)
 create mode 100644 src/SettingsModal.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 5f3df15..856be5d 100644
--- a/src/App.jsx
+++ b/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,9 +28,25 @@ 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',
       {
@@ -37,17 +54,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 }
         ]
@@ -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>
   );
 }
diff --git a/src/SettingsModal.jsx b/src/SettingsModal.jsx
new file mode 100644
index 0000000..6a27035
--- /dev/null
+++ b/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;