Ryan Malloy
0028738e33
Make your WordPress site irresistible. Natural SEO attraction with: - robots.txt management - sitemap.xml generation - LLMs.txt support - Google integration (Analytics, Search Console, Tag Manager) - Schema.org structured data - Open Graph / Twitter Card meta tags - AMP support - Visual elements gallery - Built-in backup/restore module Includes build.sh and .distignore for WordPress-installable release ZIPs.
478 lines
28 KiB
PHP
478 lines
28 KiB
PHP
<?php
|
|
/**
|
|
* About TigerStyle Heat admin page template
|
|
*/
|
|
|
|
// Prevent direct access
|
|
if (!defined('ABSPATH')) {
|
|
exit;
|
|
}
|
|
?>
|
|
|
|
<div class="seo-info-box">
|
|
<h3><?php _e('About TigerStyle Heat 🔥', 'tigerstyle-heat'); ?></h3>
|
|
<p class="description">
|
|
<?php _e('Is your website neutered/spayed? TigerStyle Heat is a comprehensive WordPress SEO plugin designed to put your site in heat and make it irresistibly attractive to visitors and search engines from around the globe!', 'tigerstyle-heat'); ?>
|
|
</p>
|
|
<div style="background: linear-gradient(135deg, #f8f4ff 0%, #fff8f0 100%); border-left: 4px solid #ff6b35; padding: 20px; margin: 20px 0; border-radius: 8px;">
|
|
<h4 style="margin: 0 0 10px 0; color: #333; font-size: 18px;"><?php _e('🔥 Put your site in heat', 'tigerstyle-heat'); ?></h4>
|
|
<p style="margin: 0; font-size: 16px; color: #555; font-style: italic;"><?php _e('Attract all the traffic naturally - it works so well, you\'ll get visitors from all over the globe!', 'tigerstyle-heat'); ?></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="seo-info-box">
|
|
<h3><?php _e('🐾 The Complete TigerStyle Ecosystem', 'tigerstyle-heat'); ?></h3>
|
|
<p><?php _e('TigerStyle Heat is part of a complete WordPress plugin suite, each specialized for different aspects of website management. Just like Kyra has different moods and skills, each plugin excels in its domain while working together seamlessly.', 'tigerstyle-heat'); ?></p>
|
|
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 20px 0;">
|
|
<!-- TigerStyle Heat Card -->
|
|
<div style="border: 3px solid #ff6b35; border-radius: 8px; padding: 20px; background: #fff8f6; position: relative;">
|
|
<div style="display: flex; align-items: center; margin-bottom: 15px;">
|
|
<span style="font-size: 32px; margin-right: 15px;">🔥</span>
|
|
<div>
|
|
<h4 style="margin: 0; color: #ff6b35;"><?php _e('TigerStyle Heat', 'tigerstyle-heat'); ?></h4>
|
|
<span style="background: #ff6b35; color: white; padding: 2px 8px; border-radius: 12px; font-size: 12px; font-weight: bold;"><?php _e('ACTIVE', 'tigerstyle-heat'); ?></span>
|
|
</div>
|
|
</div>
|
|
<p style="margin: 0 0 15px 0; color: #666;"><?php _e('Put your site in heat and attract traffic naturally! Complete SEO optimization with AI-powered content analysis, structured data, OpenGraph integration, and irresistible search engine attraction.', 'tigerstyle-heat'); ?></p>
|
|
<div style="border-top: 1px solid #eee; padding-top: 15px;">
|
|
<ul style="margin: 8px 0 0 0; padding-left: 0; color: #666; list-style: none;">
|
|
<li style="margin-bottom: 8px;">🎯 <?php _e('Natural traffic attraction (no chasing required!)', 'tigerstyle-heat'); ?></li>
|
|
<li style="margin-bottom: 8px;">🤖 <?php _e('AI-powered irresistibility optimization', 'tigerstyle-heat'); ?></li>
|
|
<li style="margin-bottom: 8px;">🌐 <?php _e('Structured data & OpenGraph heat signals', 'tigerstyle-heat'); ?></li>
|
|
<li style="margin-bottom: 8px;">🔍 <?php _e('Advanced sitemap generation and robots.txt management', 'tigerstyle-heat'); ?></li>
|
|
<li style="margin-bottom: 8px;">📊 <?php _e('Real-time SEO health monitoring and recommendations', 'tigerstyle-heat'); ?></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TigerStyle Life9 Card -->
|
|
<div style="border: 2px solid #28a745; border-radius: 8px; padding: 20px; background: #f8fff9;">
|
|
<div style="display: flex; align-items: center; margin-bottom: 15px;">
|
|
<span style="font-size: 32px; margin-right: 15px;">💾</span>
|
|
<div>
|
|
<h4 style="margin: 0; color: #46b450;"><?php _e('TigerStyle Life9', 'tigerstyle-heat'); ?></h4>
|
|
<span style="background: #ffba00; color: white; padding: 2px 8px; border-radius: 12px; font-size: 12px; font-weight: bold;"><?php _e('AVAILABLE', 'tigerstyle-heat'); ?></span>
|
|
</div>
|
|
</div>
|
|
<p style="margin: 0 0 15px 0; color: #666;"><?php _e('Comprehensive backup and disaster recovery system. Like a cat\'s nine lives, your site data is protected with multiple restore points and automated safeguards.', 'tigerstyle-heat'); ?></p>
|
|
<div style="border-top: 1px solid #eee; padding-top: 15px;">
|
|
<strong><?php _e('Key Features:', 'tigerstyle-heat'); ?></strong>
|
|
<ul style="margin: 8px 0 0 0; padding-left: 20px; color: #666;">
|
|
<li><?php _e('Automated backup scheduling', 'tigerstyle-heat'); ?></li>
|
|
<li><?php _e('Multi-destination storage', 'tigerstyle-heat'); ?></li>
|
|
<li><?php _e('One-click restore points', 'tigerstyle-heat'); ?></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TigerStyle Dash Card -->
|
|
<div style="border: 2px solid #0073aa; border-radius: 8px; padding: 20px; background: #f0f8ff;">
|
|
<div style="display: flex; align-items: center; margin-bottom: 15px;">
|
|
<span style="font-size: 32px; margin-right: 15px;">⚡</span>
|
|
<div>
|
|
<h4 style="margin: 0; color: #ff6b35;"><?php _e('TigerStyle Dash', 'tigerstyle-heat'); ?></h4>
|
|
<span style="background: #ffba00; color: white; padding: 2px 8px; border-radius: 12px; font-size: 12px; font-weight: bold;"><?php _e('AVAILABLE', 'tigerstyle-heat'); ?></span>
|
|
</div>
|
|
</div>
|
|
<p style="margin: 0 0 15px 0; color: #666;"><?php _e('Lightning-fast performance optimization with advanced caching, compression, and speed monitoring. Dash past the competition with cat-like reflexes.', 'tigerstyle-heat'); ?></p>
|
|
<div style="border-top: 1px solid #eee; padding-top: 15px;">
|
|
<strong><?php _e('Key Features:', 'tigerstyle-heat'); ?></strong>
|
|
<ul style="margin: 8px 0 0 0; padding-left: 20px; color: #666;">
|
|
<li><?php _e('Brotli + Gzip compression', 'tigerstyle-heat'); ?></li>
|
|
<li><?php _e('Smart caching with warm-up', 'tigerstyle-heat'); ?></li>
|
|
<li><?php _e('Performance analytics dashboard', 'tigerstyle-heat'); ?></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TigerStyle Scent Card -->
|
|
<div style="border: 2px solid #ffc107; border-radius: 8px; padding: 20px; background: #fffdf7;">
|
|
<div style="display: flex; align-items: center; margin-bottom: 15px;">
|
|
<span style="font-size: 32px; margin-right: 15px;">🐱</span>
|
|
<div>
|
|
<h4 style="margin: 0; color: #8e44ad;"><?php _e('TigerStyle Scent', 'tigerstyle-heat'); ?></h4>
|
|
<span style="background: #ffba00; color: white; padding: 2px 8px; border-radius: 12px; font-size: 12px; font-weight: bold;"><?php _e('AVAILABLE', 'tigerstyle-heat'); ?></span>
|
|
</div>
|
|
</div>
|
|
<p style="margin: 0 0 15px 0; color: #666;"><?php _e('OAuth2 authorization server for secure API access. Like how cats recognize each other by scent, Scent provides secure identity and access management.', 'tigerstyle-heat'); ?></p>
|
|
<div style="border-top: 1px solid #eee; padding-top: 15px;">
|
|
<strong><?php _e('Key Features:', 'tigerstyle-heat'); ?></strong>
|
|
<ul style="margin: 8px 0 0 0; padding-left: 20px; color: #666;">
|
|
<li><?php _e('OAuth2 authorization flows', 'tigerstyle-heat'); ?></li>
|
|
<li><?php _e('JWT token management', 'tigerstyle-heat'); ?></li>
|
|
<li><?php _e('API access control', 'tigerstyle-heat'); ?></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TigerStyle Whiskers Card -->
|
|
<div style="border: 2px solid #6c5ce7; border-radius: 8px; padding: 20px; background: #f8f7ff;">
|
|
<div style="display: flex; align-items: center; margin-bottom: 15px;">
|
|
<span style="font-size: 32px; margin-right: 15px;">🐱</span>
|
|
<div>
|
|
<h4 style="margin: 0; color: #6c5ce7;"><?php _e('TigerStyle Whiskers', 'tigerstyle-heat'); ?></h4>
|
|
<span style="background: #a29bfe; color: white; padding: 2px 8px; border-radius: 12px; font-size: 12px; font-weight: bold;"><?php _e('COMING SOON', 'tigerstyle-heat'); ?></span>
|
|
</div>
|
|
</div>
|
|
<p style="margin: 0 0 15px 0; color: #666;"><?php _e('GDPR compliance and privacy protection with feline precision. Like cat whiskers detect boundaries, Whiskers navigates privacy laws and detects compliance requirements with surgical accuracy.', 'tigerstyle-heat'); ?></p>
|
|
<div style="border-top: 1px solid #eee; padding-top: 15px;">
|
|
<strong><?php _e('Key Features:', 'tigerstyle-heat'); ?></strong>
|
|
<ul style="margin: 8px 0 0 0; padding-left: 20px; color: #666;">
|
|
<li><?php _e('Cookie consent management', 'tigerstyle-heat'); ?></li>
|
|
<li><?php _e('Data boundary detection', 'tigerstyle-heat'); ?></li>
|
|
<li><?php _e('Privacy audit trails', 'tigerstyle-heat'); ?></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; padding: 20px; margin: 20px 0;">
|
|
<h4 style="margin: 0 0 10px 0; color: #495057;"><?php _e('🐾 Why Choose the TigerStyle Ecosystem?', 'tigerstyle-heat'); ?></h4>
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px;">
|
|
<div>
|
|
<strong style="color: #0073aa;"><?php _e('🎯 Specialized Expertise', 'tigerstyle-heat'); ?></strong><br>
|
|
<span style="color: #666;"><?php _e('Each plugin masters its domain while integrating seamlessly', 'tigerstyle-heat'); ?></span>
|
|
</div>
|
|
<div>
|
|
<strong style="color: #46b450;"><?php _e('🔄 Unified Management', 'tigerstyle-heat'); ?></strong><br>
|
|
<span style="color: #666;"><?php _e('Consistent interface and shared settings across all plugins', 'tigerstyle-heat'); ?></span>
|
|
</div>
|
|
<div>
|
|
<strong style="color: #ff6b35;"><?php _e('⚡ Peak Performance', 'tigerstyle-heat'); ?></strong><br>
|
|
<span style="color: #666;"><?php _e('Optimized code that doesn\'t slow down your site', 'tigerstyle-heat'); ?></span>
|
|
</div>
|
|
<div>
|
|
<strong style="color: #8e44ad;"><?php _e('🛡️ Enterprise Security', 'tigerstyle-heat'); ?></strong><br>
|
|
<span style="color: #666;"><?php _e('Built with security-first architecture and best practices', 'tigerstyle-heat'); ?></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="seo-info-box" style="display: flex; gap: 20px; align-items: flex-start;">
|
|
<div style="flex-shrink: 0;">
|
|
<div style="width: 200px; height: 200px; border: 2px dashed #ccc; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #f9f9f9; color: #666; text-align: center; font-size: 14px; line-height: 1.4;">
|
|
<div>
|
|
<strong>Kyra's Photo</strong><br>
|
|
<small>Coming Soon!</small><br>
|
|
<span style="font-size: 24px;">🐾</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="flex: 1;">
|
|
<h3><?php _e('Meet Kyra - Our Inspiration', 'tigerstyle-heat'); ?></h3>
|
|
<p>
|
|
<?php _e('TigerStyle Heat is named after Kyra, an 8-year-old black cat who embodies everything we want this plugin to represent. Kyra is known throughout her neighborhood as the kindest cat in the world - everyone who meets her instantly falls in love with her welcoming and gentle nature.', 'tigerstyle-heat'); ?>
|
|
</p>
|
|
<p>
|
|
<?php _e('Just like Kyra makes everyone feel welcome and loved, TigerStyle Heat is designed to make your WordPress site welcoming and discoverable to all visitors and search engines. Whether it\'s helping search engines understand your content through structured data, or ensuring your site loads quickly for every visitor, we strive to embody Kyra\'s spirit of universal kindness and accessibility.', 'tigerstyle-heat'); ?>
|
|
</p>
|
|
|
|
<h4><?php _e('The Kyra Philosophy', 'tigerstyle-heat'); ?></h4>
|
|
<ul style="list-style: none; padding-left: 0;">
|
|
<li><span style="color: #2271b1;">🐾</span> <strong><?php _e('Welcoming to All:', 'tigerstyle-heat'); ?></strong> <?php _e('Just as Kyra welcomes everyone with open paws, our plugin ensures your site is accessible and welcoming to all visitors.', 'tigerstyle-heat'); ?></li>
|
|
<li><span style="color: #2271b1;">🐾</span> <strong><?php _e('Universally Loved:', 'tigerstyle-heat'); ?></strong> <?php _e('Like Kyra\'s universal appeal, we help your site become universally discoverable across all search engines.', 'tigerstyle-heat'); ?></li>
|
|
<li><span style="color: #2271b1;">🐾</span> <strong><?php _e('Kind & Gentle:', 'tigerstyle-heat'); ?></strong> <?php _e('Our approach to SEO is gentle and user-friendly, making optimization accessible to everyone.', 'tigerstyle-heat'); ?></li>
|
|
<li><span style="color: #2271b1;">🐾</span> <strong><?php _e('Wise & Experienced:', 'tigerstyle-heat'); ?></strong> <?php _e('At 8 years old, Kyra has the wisdom of experience - reflected in our comprehensive, mature SEO functionality.', 'tigerstyle-heat'); ?></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="seo-info-box">
|
|
<h3><?php _e('Plugin Features Inspired by Kyra', 'tigerstyle-heat'); ?></h3>
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 15px;">
|
|
|
|
<div style="border: 1px solid #ddd; border-radius: 5px; padding: 15px; background: #fff;">
|
|
<h4 style="margin-top: 0; color: #2271b1;"><?php _e('🌐 Universal Welcome', 'tigerstyle-heat'); ?></h4>
|
|
<p><?php _e('Schema.org structured data and comprehensive meta tags ensure your content is understood and welcomed by all search engines, just like Kyra welcomes all visitors.', 'tigerstyle-heat'); ?></p>
|
|
</div>
|
|
|
|
<div style="border: 1px solid #ddd; border-radius: 5px; padding: 15px; background: #fff;">
|
|
<h4 style="margin-top: 0; color: #2271b1;"><?php _e('💖 Loved by Everyone', 'tigerstyle-heat'); ?></h4>
|
|
<p><?php _e('OpenGraph and social media optimization help your content be loved and shared across all platforms, spreading joy like Kyra spreads love.', 'tigerstyle-heat'); ?></p>
|
|
</div>
|
|
|
|
<div style="border: 1px solid #ddd; border-radius: 5px; padding: 15px; background: #fff;">
|
|
<h4 style="margin-top: 0; color: #2271b1;"><?php _e('🔍 Easy to Find', 'tigerstyle-heat'); ?></h4>
|
|
<p><?php _e('Comprehensive sitemap generation and robots.txt management ensure your content is easily discoverable, just like everyone can easily find and connect with Kyra.', 'tigerstyle-heat'); ?></p>
|
|
</div>
|
|
|
|
<div style="border: 1px solid #ddd; border-radius: 5px; padding: 15px; background: #fff;">
|
|
<h4 style="margin-top: 0; color: #2271b1;"><?php _e('⚡ Fast & Responsive', 'tigerstyle-heat'); ?></h4>
|
|
<p><?php _e('Performance optimization ensures your site responds quickly to every visitor, reflecting Kyra\'s responsive and attentive nature.', 'tigerstyle-heat'); ?></p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="seo-info-box">
|
|
<h3><?php _e('🤖 AI Chat Tester', 'tigerstyle-heat'); ?></h3>
|
|
<p><?php _e('Test your AI API keys and chat with different models to see how they can help with your SEO content creation.', 'tigerstyle-heat'); ?></p>
|
|
|
|
<div id="ai-chat-tester" style="background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 20px; margin: 20px 0;">
|
|
<!-- API Key Management -->
|
|
<div style="margin-bottom: 20px;">
|
|
<h4 style="margin-bottom: 10px;"><?php _e('Quick Setup', 'tigerstyle-heat'); ?></h4>
|
|
<div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
|
|
<input type="text" id="ai-api-key" placeholder="Enter API Key (e.g., sk-...)" style="flex: 1; min-width: 200px; padding: 8px;">
|
|
<input type="text" id="ai-base-url" placeholder="Base URL (e.g., https://api.openai.com/v1)" value="https://api.openai.com/v1" style="flex: 1; min-width: 200px; padding: 8px;">
|
|
<button id="test-api-key" class="button button-secondary"><?php _e('Test & Load Models', 'tigerstyle-heat'); ?></button>
|
|
</div>
|
|
<p style="font-size: 12px; color: #666; margin-top: 5px;">
|
|
<?php _e('Enter your OpenAI API key to test the connection and load available models.', 'tigerstyle-heat'); ?>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Model Selection -->
|
|
<div style="margin-bottom: 20px;">
|
|
<label for="ai-model-select" style="display: block; margin-bottom: 5px; font-weight: bold;"><?php _e('Model:', 'tigerstyle-heat'); ?></label>
|
|
<select id="ai-model-select" style="width: 100%; padding: 8px; margin-bottom: 10px;">
|
|
<option value=""><?php _e('Select a model (test API key first)', 'tigerstyle-heat'); ?></option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Chat Interface -->
|
|
<div style="margin-bottom: 20px;">
|
|
<label for="ai-message-input" style="display: block; margin-bottom: 5px; font-weight: bold;"><?php _e('Your Message:', 'tigerstyle-heat'); ?></label>
|
|
<textarea id="ai-message-input" placeholder="Ask for help with SEO content, meta descriptions, titles, etc..." style="width: 100%; height: 80px; padding: 10px; resize: vertical;"></textarea>
|
|
<button id="send-ai-message" class="button button-primary" style="margin-top: 10px;" disabled><?php _e('Send Message', 'tigerstyle-heat'); ?></button>
|
|
<button id="clear-chat" class="button button-secondary" style="margin-top: 10px; margin-left: 10px;"><?php _e('Clear Chat', 'tigerstyle-heat'); ?></button>
|
|
</div>
|
|
|
|
<!-- Chat Response Area -->
|
|
<div id="ai-chat-response" style="background: #f9f9f9; border: 1px solid #e1e1e1; border-radius: 5px; padding: 15px; min-height: 100px; max-height: 400px; overflow-y: auto; white-space: pre-wrap; font-family: monospace; font-size: 14px; display: none;">
|
|
<p style="color: #666; font-style: italic;"><?php _e('AI responses will appear here...', 'tigerstyle-heat'); ?></p>
|
|
</div>
|
|
|
|
<!-- Status/Loading indicator -->
|
|
<div id="ai-status" style="margin-top: 10px; padding: 10px; border-radius: 5px; display: none;">
|
|
<span id="ai-status-text"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
jQuery(document).ready(function($) {
|
|
let currentApiKey = '';
|
|
let currentBaseUrl = '';
|
|
let chatHistory = [];
|
|
|
|
// Test API Key and Load Models
|
|
$('#test-api-key').on('click', function() {
|
|
const apiKey = $('#ai-api-key').val().trim();
|
|
const baseUrl = $('#ai-base-url').val().trim();
|
|
|
|
if (!apiKey) {
|
|
showStatus('Please enter an API key', 'error');
|
|
return;
|
|
}
|
|
|
|
if (!baseUrl) {
|
|
showStatus('Please enter a base URL', 'error');
|
|
return;
|
|
}
|
|
|
|
showStatus('Testing API key and loading models...', 'loading');
|
|
$(this).prop('disabled', true);
|
|
|
|
$.ajax({
|
|
url: ajaxurl,
|
|
type: 'POST',
|
|
data: {
|
|
action: 'tigerstyle_ai_test_key',
|
|
api_key: apiKey,
|
|
base_url: baseUrl,
|
|
nonce: '<?php echo wp_create_nonce('tigerstyle_ai_nonce'); ?>'
|
|
},
|
|
success: function(response) {
|
|
if (response.success) {
|
|
currentApiKey = apiKey;
|
|
currentBaseUrl = baseUrl;
|
|
|
|
// Populate model dropdown
|
|
const modelSelect = $('#ai-model-select');
|
|
modelSelect.empty();
|
|
modelSelect.append('<option value=""><?php _e('Select a model', 'tigerstyle-heat'); ?></option>');
|
|
|
|
if (response.data.models && response.data.models.length > 0) {
|
|
response.data.models.forEach(function(model) {
|
|
modelSelect.append($('<option>', {
|
|
value: model.id,
|
|
text: model.id + (model.owned_by ? ' (' + model.owned_by + ')' : '')
|
|
}));
|
|
});
|
|
showStatus('✅ API key valid! ' + response.data.models.length + ' models loaded.', 'success');
|
|
} else {
|
|
showStatus('✅ API key valid, but no models found.', 'success');
|
|
}
|
|
|
|
$('#send-ai-message').prop('disabled', false);
|
|
} else {
|
|
showStatus('❌ API key test failed: ' + (response.data || 'Unknown error'), 'error');
|
|
$('#send-ai-message').prop('disabled', true);
|
|
}
|
|
},
|
|
error: function() {
|
|
showStatus('❌ Request failed. Please check your connection.', 'error');
|
|
$('#send-ai-message').prop('disabled', true);
|
|
},
|
|
complete: function() {
|
|
$('#test-api-key').prop('disabled', false);
|
|
}
|
|
});
|
|
});
|
|
|
|
// Send Chat Message
|
|
$('#send-ai-message').on('click', function() {
|
|
const message = $('#ai-message-input').val().trim();
|
|
const model = $('#ai-model-select').val();
|
|
|
|
if (!message) {
|
|
showStatus('Please enter a message', 'error');
|
|
return;
|
|
}
|
|
|
|
if (!model) {
|
|
showStatus('Please select a model', 'error');
|
|
return;
|
|
}
|
|
|
|
if (!currentApiKey) {
|
|
showStatus('Please test your API key first', 'error');
|
|
return;
|
|
}
|
|
|
|
showStatus('Sending message...', 'loading');
|
|
$(this).prop('disabled', true);
|
|
|
|
// Add user message to chat
|
|
addToChatHistory('user', message);
|
|
displayChat();
|
|
|
|
$.ajax({
|
|
url: ajaxurl,
|
|
type: 'POST',
|
|
data: {
|
|
action: 'tigerstyle_ai_chat',
|
|
message: message,
|
|
model: model,
|
|
api_key: currentApiKey,
|
|
base_url: currentBaseUrl,
|
|
nonce: '<?php echo wp_create_nonce('tigerstyle_ai_nonce'); ?>'
|
|
},
|
|
success: function(response) {
|
|
if (response.success) {
|
|
addToChatHistory('assistant', response.data.response);
|
|
displayChat();
|
|
showStatus('✅ Message sent successfully!', 'success');
|
|
$('#ai-message-input').val(''); // Clear input
|
|
} else {
|
|
showStatus('❌ Chat failed: ' + (response.data || 'Unknown error'), 'error');
|
|
}
|
|
},
|
|
error: function() {
|
|
showStatus('❌ Request failed. Please check your connection.', 'error');
|
|
},
|
|
complete: function() {
|
|
$('#send-ai-message').prop('disabled', false);
|
|
}
|
|
});
|
|
});
|
|
|
|
// Clear Chat
|
|
$('#clear-chat').on('click', function() {
|
|
chatHistory = [];
|
|
$('#ai-chat-response').hide().html('<p style="color: #666; font-style: italic;"><?php _e('AI responses will appear here...', 'tigerstyle-heat'); ?></p>');
|
|
showStatus('Chat cleared', 'success');
|
|
});
|
|
|
|
// Helper Functions
|
|
function addToChatHistory(role, content) {
|
|
chatHistory.push({
|
|
role: role,
|
|
content: content,
|
|
timestamp: new Date()
|
|
});
|
|
}
|
|
|
|
function displayChat() {
|
|
const chatDiv = $('#ai-chat-response');
|
|
let chatHtml = '';
|
|
|
|
chatHistory.forEach(function(entry) {
|
|
const roleLabel = entry.role === 'user' ? '👤 You' : '🤖 AI';
|
|
const timestamp = entry.timestamp.toLocaleTimeString();
|
|
chatHtml += `<div style="margin-bottom: 15px; padding: 10px; background: ${entry.role === 'user' ? '#e8f4f8' : '#f0f8e8'}; border-radius: 5px;">`;
|
|
chatHtml += `<strong>${roleLabel}</strong> <span style="color: #666; font-size: 12px;">${timestamp}</span><br>`;
|
|
chatHtml += `<div style="margin-top: 5px;">${entry.content}</div>`;
|
|
chatHtml += '</div>';
|
|
});
|
|
|
|
chatDiv.html(chatHtml).show();
|
|
chatDiv.scrollTop(chatDiv[0].scrollHeight);
|
|
}
|
|
|
|
function showStatus(message, type) {
|
|
const statusDiv = $('#ai-status');
|
|
const statusText = $('#ai-status-text');
|
|
|
|
statusDiv.removeClass('notice-success notice-error notice-info');
|
|
|
|
if (type === 'success') {
|
|
statusDiv.addClass('notice-success');
|
|
statusDiv.css('background', '#d4edda');
|
|
statusDiv.css('color', '#155724');
|
|
statusDiv.css('border', '1px solid #c3e6cb');
|
|
} else if (type === 'error') {
|
|
statusDiv.addClass('notice-error');
|
|
statusDiv.css('background', '#f8d7da');
|
|
statusDiv.css('color', '#721c24');
|
|
statusDiv.css('border', '1px solid #f5c6cb');
|
|
} else {
|
|
statusDiv.addClass('notice-info');
|
|
statusDiv.css('background', '#d1ecf1');
|
|
statusDiv.css('color', '#0c5460');
|
|
statusDiv.css('border', '1px solid #bee5eb');
|
|
}
|
|
|
|
statusText.text(message);
|
|
statusDiv.show();
|
|
|
|
if (type === 'success' || type === 'error') {
|
|
setTimeout(function() {
|
|
statusDiv.fadeOut();
|
|
}, 5000);
|
|
}
|
|
}
|
|
|
|
// Enter key to send message
|
|
$('#ai-message-input').on('keypress', function(e) {
|
|
if (e.which === 13 && !e.shiftKey) {
|
|
e.preventDefault();
|
|
$('#send-ai-message').click();
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</div>
|
|
|
|
|
|
<div class="seo-info-box">
|
|
<h3><?php _e('Support & Community', 'tigerstyle-heat'); ?></h3>
|
|
<p>
|
|
<?php _e('Built with the same care and attention that Kyra gives to everyone she meets, TigerStyle Heat is continuously updated to ensure your WordPress site remains optimized, accessible, and loved by both visitors and search engines.', 'tigerstyle-heat'); ?>
|
|
</p>
|
|
<p>
|
|
<?php _e('Have questions or need help? Just like Kyra is always there for her family, we\'re here to help you succeed with your SEO goals.', 'tigerstyle-heat'); ?>
|
|
</p>
|
|
|
|
<div style="text-align: center; margin-top: 20px; padding: 20px; background: #f0f8ff; border-radius: 10px;">
|
|
<p style="font-style: italic; color: #555; margin: 0;">
|
|
"<?php _e('May your website be as welcoming and loved as Kyra makes everyone feel.', 'tigerstyle-heat'); ?>"
|
|
</p>
|
|
<p style="margin: 10px 0 0 0; font-size: 14px; color: #777;">
|
|
— <?php _e('The TigerStyle Heat Team', 'tigerstyle-heat'); ?>
|
|
</p>
|
|
</div>
|
|
</div>
|