saving diagrams
This commit is contained in:
parent
b07191224e
commit
b2cba70f79
1
db/migrations/002_add_diagram_text_to_profiles.sql
Normal file
1
db/migrations/002_add_diagram_text_to_profiles.sql
Normal file
@ -0,0 +1 @@
|
||||
ALTER TABLE `gtm_profiles` ADD `diagram_mermaid_text` TEXT NULL DEFAULT NULL;
|
||||
@ -106,6 +106,7 @@ file_put_contents($log_file, $log_entry, FILE_APPEND);
|
||||
|
||||
// Clean up the response and extract the Mermaid code
|
||||
$diagram = trim($diagram);
|
||||
$is_error = false;
|
||||
|
||||
// Regex to find Mermaid code block, with or without backticks and optional "mermaid" label
|
||||
if (preg_match('/```(?:mermaid)?\s*(graph\s(TD|LR|BT|RL);?[\s\S]*?)```|^(graph\s(TD|LR|BT|RL);?[\s\S]*)/', $diagram, $matches)) {
|
||||
@ -116,8 +117,19 @@ if (preg_match('/```(?:mermaid)?\s*(graph\s(TD|LR|BT|RL);?[\s\S]*?)```|^(graph\s
|
||||
// If no match, log the bad response and set an error for the user
|
||||
error_log("Invalid AI response format: " . $diagram);
|
||||
$diagram = "graph TD; A[Error: Invalid AI response format.];";
|
||||
$is_error = true;
|
||||
}
|
||||
|
||||
// --- Auto-save the generated diagram to the database ---
|
||||
if (!$is_error) {
|
||||
try {
|
||||
$pdo = db();
|
||||
$stmt = $pdo->prepare("UPDATE gtm_profiles SET diagram_mermaid_text = ? WHERE id = ?");
|
||||
$stmt->execute([$diagram, $profile_id]);
|
||||
} catch (PDOException $e) {
|
||||
// Log the error, but don't block the user. The diagram was generated, just not saved.
|
||||
error_log("DB Error saving diagram for profile {$profile_id}: " . $e->getMessage());
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
echo json_encode(['diagram' => $diagram]);
|
||||
echo json_encode(['diagram' => $diagram]);
|
||||
50
generate_roles.php
Normal file
50
generate_roles.php
Normal file
@ -0,0 +1,50 @@
|
||||
<?php
|
||||
require_once 'db/config.php';
|
||||
|
||||
header('Content-Type: application/json');
|
||||
|
||||
$profile_id = $_GET['id'] ?? null;
|
||||
|
||||
if (!$profile_id) {
|
||||
echo json_encode(['error' => 'Profile ID is missing.']);
|
||||
exit;
|
||||
}
|
||||
|
||||
try {
|
||||
$pdo = db();
|
||||
$stmt = $pdo->prepare("SELECT * FROM gtm_profiles WHERE id = ?");
|
||||
$stmt->execute([$profile_id]);
|
||||
$profile = $stmt->fetch(PDO::FETCH_ASSOC);
|
||||
|
||||
if (!$profile) {
|
||||
echo json_encode(['error' => 'Profile not found.']);
|
||||
exit;
|
||||
}
|
||||
|
||||
// Simulate AI-powered recommendations based on profile data
|
||||
$recommendations = '<ul>';
|
||||
|
||||
if (strpos(strtolower($profile['sales_motions']), 'outbound') !== false) {
|
||||
$recommendations .= '<li><strong>SDR:</strong> 2 roles (Lead nurturing, qualification, demo scheduling)</li>';
|
||||
}
|
||||
|
||||
if (strpos(strtolower($profile['sells_what']), 'product') !== false) {
|
||||
$recommendations .= '<li><strong>Product Marketing Manager:</strong> 1 role (Positioning, ICP refinement)</li>';
|
||||
}
|
||||
|
||||
if (strpos(strtolower($profile['sales_motions']), 'partner') !== false) {
|
||||
$recommendations .= '<li><strong>Partner Marketing Manager:</strong> 1 role (Managing partner relationships)</li>';
|
||||
}
|
||||
|
||||
if ($recommendations === '<ul>') {
|
||||
$recommendations = '<p>No specific role recommendations for this profile.</p>';
|
||||
} else {
|
||||
$recommendations .= '</ul>';
|
||||
}
|
||||
|
||||
echo json_encode(['recommendations' => $recommendations]);
|
||||
|
||||
} catch (PDOException $e) {
|
||||
error_log($e->getMessage());
|
||||
echo json_encode(['error' => 'Database error occurred.']);
|
||||
}
|
||||
50
generate_tools.php
Normal file
50
generate_tools.php
Normal file
@ -0,0 +1,50 @@
|
||||
<?php
|
||||
require_once 'db/config.php';
|
||||
|
||||
header('Content-Type: application/json');
|
||||
|
||||
$profile_id = $_GET['id'] ?? null;
|
||||
|
||||
if (!$profile_id) {
|
||||
echo json_encode(['error' => 'Profile ID is missing.']);
|
||||
exit;
|
||||
}
|
||||
|
||||
try {
|
||||
$pdo = db();
|
||||
$stmt = $pdo->prepare("SELECT * FROM gtm_profiles WHERE id = ?");
|
||||
$stmt->execute([$profile_id]);
|
||||
$profile = $stmt->fetch(PDO::FETCH_ASSOC);
|
||||
|
||||
if (!$profile) {
|
||||
echo json_encode(['error' => 'Profile not found.']);
|
||||
exit;
|
||||
}
|
||||
|
||||
// Simulate AI-powered recommendations based on profile data
|
||||
$recommendations = '<ul>';
|
||||
|
||||
if (strpos(strtolower($profile['sales_motions']), 'outbound') !== false || strpos(strtolower($profile['roles']), 'sdr') !== false) {
|
||||
$recommendations .= '<li><strong>CRM:</strong> HubSpot (Integrates with SDR workflows)</li>';
|
||||
}
|
||||
|
||||
if (strpos(strtolower($profile['sells_what']), 'product') !== false) {
|
||||
$recommendations .= '<li><strong>Analytics:</strong> Mixpanel (Tracks Product-led growth)</li>';
|
||||
}
|
||||
|
||||
if (strpos(strtolower($profile['market_size']), 'large') !== false || strpos(strtolower($profile['market_size']), 'enterprise') !== false) {
|
||||
$recommendations .= '<li><strong>Automation:</strong> Zapier (Connects CRM to email marketing tools)</li>';
|
||||
}
|
||||
|
||||
if ($recommendations === '<ul>') {
|
||||
$recommendations = '<p>No specific tool recommendations for this profile.</p>';
|
||||
} else {
|
||||
$recommendations .= '</ul>';
|
||||
}
|
||||
|
||||
echo json_encode(['recommendations' => $recommendations]);
|
||||
|
||||
} catch (PDOException $e) {
|
||||
error_log($e->getMessage());
|
||||
echo json_encode(['error' => 'Database error occurred.']);
|
||||
}
|
||||
202
profile.php
202
profile.php
@ -7,6 +7,7 @@ $profile_id = $_GET['id'] ?? null;
|
||||
if ($profile_id) {
|
||||
try {
|
||||
$pdo = db();
|
||||
// Updated to fetch the diagram text as well
|
||||
$stmt = $pdo->prepare("SELECT * FROM gtm_profiles WHERE id = ?");
|
||||
$stmt->execute([$profile_id]);
|
||||
$profile = $stmt->fetch(PDO::FETCH_ASSOC);
|
||||
@ -38,28 +39,18 @@ if ($profile_id) {
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Dashboard</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="profile.php">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Dashboard</a></li>
|
||||
<li class="nav-item"><a class="nav-link active" aria-current="page" href="profile.php">Profile</a></li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Tools
|
||||
</a>
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Tools</a>
|
||||
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
|
||||
<li><a class="dropdown-item" href="#">Design</a></li>
|
||||
<li><a class="dropdown-item" href="#">Diagram</a></li>
|
||||
<li><a class="dropdown-item" href="#">Integrations</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Settings</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Account</a>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Settings</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Account</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@ -74,7 +65,20 @@ if ($profile_id) {
|
||||
<h5 class="card-title mb-0">Business Name: <?php echo htmlspecialchars($profile['business_name']); ?></h5>
|
||||
<button id="generate-diagram-btn" class="btn btn-primary" data-profile-id="<?php echo htmlspecialchars($profile_id); ?>">Generate GTM Process Flow Diagram</button>
|
||||
</div>
|
||||
|
||||
<!-- Diagram and Editor Section -->
|
||||
<div id="diagram-container" class="mb-4"></div>
|
||||
<div id="diagram-editor-container" class="mb-4" style="display: none;">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Diagram Editor</h5>
|
||||
<div id="save-status" class="mb-2"></div>
|
||||
<textarea id="diagram-editor" class="form-control" rows="10"></textarea>
|
||||
<button id="save-diagram-btn" class="btn btn-success mt-2">Save Diagram</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="card-text"><strong>Sells What:</strong> <?php echo htmlspecialchars($profile['sells_what']); ?></p>
|
||||
<hr>
|
||||
<h6 class="card-subtitle mb-2 text-muted">Market & Sales</h6>
|
||||
@ -88,6 +92,29 @@ if ($profile_id) {
|
||||
<hr>
|
||||
<h6 class="card-subtitle mb-2 text-muted">Goals</h6>
|
||||
<p class="card-text"><strong>Growth Goals:</strong> <?php echo htmlspecialchars($profile['goals']); ?></p>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">AI-Generated Role Recommendations</h5>
|
||||
<p class="card-text">Get AI-powered suggestions for marketing and sales roles to execute your GTM strategy.</p>
|
||||
<button id="generate-roles-btn" class="btn btn-primary" data-profile-id="<?php echo htmlspecialchars($profile_id); ?>">Generate Roles</button>
|
||||
<div id="roles-container" class="mt-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">AI-Recommended Tools & Integrations</h5>
|
||||
<p class="card-text">Discover top industry solutions and integrations to efficiently execute your GTM strategy.</p>
|
||||
<button id="generate-tools-btn" class="btn btn-primary" data-profile-id="<?php echo htmlspecialchars($profile_id); ?>">Generate Tools</button>
|
||||
<div id="tools-container" class="mt-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
@ -109,12 +136,100 @@ if ($profile_id) {
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const generateBtn = document.getElementById('generate-diagram-btn');
|
||||
const diagramContainer = document.getElementById('diagram-container');
|
||||
const editorContainer = document.getElementById('diagram-editor-container');
|
||||
const editor = document.getElementById('diagram-editor');
|
||||
const saveBtn = document.getElementById('save-diagram-btn');
|
||||
const saveStatus = document.getElementById('save-status');
|
||||
const profileId = generateBtn ? generateBtn.dataset.profileId : null;
|
||||
|
||||
const generateRolesBtn = document.getElementById('generate-roles-btn');
|
||||
const rolesContainer = document.getElementById('roles-container');
|
||||
const generateToolsBtn = document.getElementById('generate-tools-btn');
|
||||
const toolsContainer = document.getElementById('tools-container');
|
||||
|
||||
if (generateRolesBtn) {
|
||||
generateRolesBtn.addEventListener('click', function () {
|
||||
rolesContainer.innerHTML = '<div class="text-center"><div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div><p>Generating roles...</p></div>';
|
||||
generateRolesBtn.disabled = true;
|
||||
|
||||
fetch(`generate_roles.php?id=${profileId}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.error) {
|
||||
rolesContainer.innerHTML = `<div class="alert alert-danger">${data.error}</div>`;
|
||||
} else {
|
||||
rolesContainer.innerHTML = data.recommendations;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error generating roles:', error);
|
||||
rolesContainer.innerHTML = '<div class="alert alert-danger">An error occurred while generating roles.</div>';
|
||||
})
|
||||
.finally(() => {
|
||||
generateRolesBtn.disabled = false;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
if (generateToolsBtn) {
|
||||
generateToolsBtn.addEventListener('click', function () {
|
||||
toolsContainer.innerHTML = '<div class="text-center"><div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div><p>Generating tools...</p></div>';
|
||||
generateToolsBtn.disabled = true;
|
||||
|
||||
fetch(`generate_tools.php?id=${profileId}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.error) {
|
||||
toolsContainer.innerHTML = `<div class="alert alert-danger">${data.error}</div>`;
|
||||
} else {
|
||||
toolsContainer.innerHTML = data.recommendations;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error generating tools:', error);
|
||||
toolsContainer.innerHTML = '<div class="alert alert-danger">An error occurred while generating tools.</div>';
|
||||
})
|
||||
.finally(() => {
|
||||
generateToolsBtn.disabled = false;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Function to render the diagram
|
||||
const renderDiagram = (mermaidCode) => {
|
||||
if (!mermaidCode) {
|
||||
diagramContainer.innerHTML = '';
|
||||
return;
|
||||
}
|
||||
try {
|
||||
diagramContainer.innerHTML = `
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">GTM Process Flow Diagram</h5>
|
||||
<div class="mermaid text-center">${mermaidCode}</div>
|
||||
</div>
|
||||
</div>`;
|
||||
mermaid.run();
|
||||
editor.value = mermaidCode;
|
||||
editorContainer.style.display = 'block';
|
||||
} catch (e) {
|
||||
diagramContainer.innerHTML = '<div class="alert alert-danger">Invalid diagram syntax.</div>';
|
||||
console.error("Mermaid render error:", e);
|
||||
}
|
||||
};
|
||||
|
||||
// Load existing diagram on page load
|
||||
const existingDiagram = <?php echo json_encode($profile['diagram_mermaid_text'] ?? null); ?>;
|
||||
if (existingDiagram) {
|
||||
renderDiagram(existingDiagram);
|
||||
}
|
||||
|
||||
// Generate button click handler
|
||||
if (generateBtn) {
|
||||
generateBtn.addEventListener('click', function () {
|
||||
const profileId = this.dataset.profileId;
|
||||
diagramContainer.innerHTML = '<div class="text-center"><div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div><p>Generating diagram...</p></div>';
|
||||
generateBtn.disabled = true;
|
||||
editorContainer.style.display = 'none';
|
||||
|
||||
fetch(`generate_diagram.php?id=${profileId}`)
|
||||
.then(response => response.json())
|
||||
@ -122,17 +237,7 @@ if ($profile_id) {
|
||||
if (data.error) {
|
||||
diagramContainer.innerHTML = `<div class="alert alert-danger">${data.error}</div>`;
|
||||
} else {
|
||||
const mermaidCode = data.diagram;
|
||||
diagramContainer.innerHTML = `
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">GTM Process Flow Diagram</h5>
|
||||
<div class="mermaid text-center">
|
||||
${mermaidCode}
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
mermaid.run();
|
||||
renderDiagram(data.diagram);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
@ -144,6 +249,49 @@ if ($profile_id) {
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Live update diagram from editor
|
||||
let debounceTimer;
|
||||
editor.addEventListener('input', () => {
|
||||
clearTimeout(debounceTimer);
|
||||
debounceTimer = setTimeout(() => {
|
||||
renderDiagram(editor.value);
|
||||
}, 500); // 500ms debounce
|
||||
});
|
||||
|
||||
// Save button click handler
|
||||
if (saveBtn) {
|
||||
saveBtn.addEventListener('click', function () {
|
||||
const diagramText = editor.value;
|
||||
saveStatus.innerHTML = '<span class="text-info">Saving...</span>';
|
||||
saveBtn.disabled = true;
|
||||
|
||||
fetch('save_diagram.php', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
profile_id: profileId,
|
||||
diagram_text: diagramText
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
saveStatus.innerHTML = '<span class="text-success">Saved successfully!</span>';
|
||||
} else {
|
||||
saveStatus.innerHTML = `<span class="text-danger">Error: ${data.error || 'Could not save.'}</span>`;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error saving diagram:', error);
|
||||
saveStatus.innerHTML = '<span class="text-danger">An unexpected error occurred.</span>';
|
||||
})
|
||||
.finally(() => {
|
||||
saveBtn.disabled = false;
|
||||
setTimeout(() => { saveStatus.innerHTML = ''; }, 3000);
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
44
save_diagram.php
Normal file
44
save_diagram.php
Normal file
@ -0,0 +1,44 @@
|
||||
<?php
|
||||
ini_set('display_errors', 1);
|
||||
ini_set('display_startup_errors', 1);
|
||||
error_reporting(E_ALL);
|
||||
|
||||
require_once 'db/config.php';
|
||||
|
||||
header('Content-Type: application/json');
|
||||
|
||||
$response = ['success' => false, 'message' => 'An unknown error occurred.'];
|
||||
|
||||
try {
|
||||
$data = json_decode(file_get_contents('php://input'), true);
|
||||
|
||||
if (json_last_error() !== JSON_ERROR_NONE) {
|
||||
throw new Exception('Invalid JSON received. ' . json_last_error_msg());
|
||||
}
|
||||
|
||||
if (isset($data['profile_id']) && isset($data['diagram_text'])) {
|
||||
$profileId = $data['profile_id'];
|
||||
$diagramText = $data['diagram_text'];
|
||||
|
||||
$pdo = db();
|
||||
|
||||
$stmt = $pdo->prepare("UPDATE gtm_profiles SET diagram_mermaid_text = :diagram_text WHERE id = :profile_id");
|
||||
|
||||
$stmt->bindValue(':diagram_text', $diagramText, PDO::PARAM_STR);
|
||||
$stmt->bindValue(':profile_id', $profileId, PDO::PARAM_INT);
|
||||
|
||||
if ($stmt->execute()) {
|
||||
$response['success'] = true;
|
||||
$response['message'] = 'Diagram saved successfully.';
|
||||
} else {
|
||||
$errorInfo = $stmt->errorInfo();
|
||||
$response['message'] = 'Failed to save diagram. DB Error: ' . ($errorInfo[2] ?? 'Unknown');
|
||||
}
|
||||
} else {
|
||||
$response['message'] = 'Invalid input.';
|
||||
}
|
||||
} catch (Exception $e) {
|
||||
$response['message'] = 'Error: ' . $e->getMessage();
|
||||
}
|
||||
|
||||
echo json_encode($response);
|
||||
Loading…
x
Reference in New Issue
Block a user